cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<h3 add_date="1461250448" last_modified="1471533242">Bookmarklets<div style="float:right;opacity:.5;font-size:.8em;">(Updated: 11/02/2016)</div> </h3> 
<p style="font-size:.9em;">Drag the bookmarklets into your browsers bookmark bar.</p>
        <dl><p>
            </p><dt><h3 add_date="1461250448" last_modified="1471533324">Domain/Server Bookmarklets</h3>
            <dl><p>
                </p><dt><a href='javascript:(function()%7Bwindow.open(  "http%3A%2F%2Fwho.is%2Fwhois%2F" %2B document.domain)%7D)()' add_date="1461250448">Who.is</a>
                </dt><dt><a href='javascript:(function()%7Bwindow.open(  "https%3A%2F%2Fwww.whatsmydns.net%2F%23A%2F" %2B document.domain)%7D)()' add_date="1461250448">DNSpropagation</a>
                </dt><dt><a href="javascript:(function(y,p,o){p=y.body.appendChild(y.createElement('iframe'));p.id='YSLOW-bookmarklet';p.style.cssText='display:none';o=p.contentWindow.document;o.open().write('<head><body onload=&quot;YUI_config={win:window.parent,doc:window.parent.document};var d=document;d.getElementsByTagName(\'head\')[0].appendChild(d.createElement(\'script\')).src=\'http://yslow.org/yslow-bookmarklet.js\'&quot;>');o.close()}(document))" add_date="1467738397">YSlow</a>
                </dt><dt><a href="javascript:(function(){%20window.open('https://developers.google.com/speed/pagespeed/insights/?url='+encodeURIComponent(location.href))})();" add_date="1461250448">Page Speed Insights</a>
                </dt>
              <dt><a href="javascript: window.open('https://gtmetrix.com/?url=' + document.domain)" add_date="1461250448">GTmetrix</a>
                </dt>
              <dt><a href="javascript: window.open('http://checkgzipcompression.com/?url=' + document.domain)" add_date="1461250448">CheckGZIPcompression</a>
                </dt>
              <dt><a href="javascript: window.open('http://showdnsrecords.com/?url=' + document.domain)" add_date="1461250448">ShowDNSRecords</a>
                </dt>
              <dt><a href='javascript:(function(){window.open(  "http://pagexray.com/scan/?page="+ location.hostname + location.pathname )})()' add_date="1461250448">PageXray</a>
                </dt>
             <dt><a href='javascript:(function(){window.open(  "http://builtwith.com?"+ location.hostname + location.pathname )})()' add_date="1461250448">BuiltWith</a>
                </dt><dt><a href="javascript:%20(function()%20%7B%20var%20d%20%3D%20document,%20e%20%3D%20d.getElementById(%27wappalyzer-container%27)%20%3B%20if%20(%20e%20!%3D%3D%20null%20)%20%7B%20d.body.removeChild(e)%3B%20%7D%20var%20u%20%3D%20%27https://wappalyzer.com/bookmarklet/%27,%20t%20%3D%20new%20Date().getTime(),%20c%20%3D%20d.createElement(%27div%27),%20p%20%3D%20d.createElement(%27div%27),%20l%20%3D%20d.createElement(%27link%27),%20s%20%3D%20d.createElement(%27script%27)%20%3B%20c.setAttribute(%27id%27,%20%27wappalyzer-container%27)%3B%20l.setAttribute(%27rel%27,%20%27stylesheet%27)%3B%20l.setAttribute(%27href%27,%20u%20%2B%20%27css/wappalyzer.css%27)%3B%20d.head.appendChild(l)%3B%20p.setAttribute(%27id%27,%20%27wappalyzer-pending%27)%3B%20p.setAttribute(%27style%27,%20%27background-image:%20url(%27%20%2B%20u%20%2B%20%27images/pending.gif)%20!important%27)%3B%20c.appendChild(p)%3B%20s.setAttribute(%27src%27,%20u%20%2B%20%27js/wappalyzer.js%3F%27%20%2B%20t)%3B%20s.onload%20%3D%20function()%20%7B%20s%20%3D%20d.createElement(%27script%27)%3B%20s.setAttribute(%27src%27,%20u%20%2B%20%27js/apps.js%3F%27%20%2B%20t)%3B%20s.onload%20%3D%20function()%20%7B%20s%20%3D%20d.createElement(%27script%27)%3B%20s.setAttribute(%27src%27,%20u%20%2B%20%27js/driver.js%3F%27%20%2B%20t)%3B%20c.appendChild(s)%3B%20%7D%3B%20c.appendChild(s)%3B%20%7D%3B%20c.appendChild(s)%3B%20d.body.appendChild(c)%3B%20%7D)()%3B" add_date="1461250448">Wappalyzer</a>
                </dt><dt><a href='javascript:(function()%7Bwindow.open(  "http%3A%2F%2Fsitecheck2.sucuri.net%2Fresults%2F" %2B document.domain)%7D)()' add_date="1461250448">Sucuri Scan</a>
                </dt><dt><a href="javascript: window.open('http://app.webinspector.com/check?url=' + document.domain)" add_date="1461250448">WebinspectorScan</a>
                </dt><dt><a href="javascript:location.href='http://www.webutations.org/'+'go/review/'+document.domain.replace('www.','')+'?req=bkmlet';" add_date="1461250448">Webutation Check</a>
                </dt><dt><a href="javascript:void(location.href='http://www.isitdownrightnow.com/downorjustme.php?url='+encodeURI(window.location.host));" add_date="1461250448">DownRightNow?</a>
                </dt><dt><a href='javascript:(function()%7Bwindow.open(  "http%3A%2F%2Fweb.archive.org%2Fweb%2F*%2F" %2B document.domain)%7D)()' add_date="1461250448">WaybackMachine</a>
            </dt></dl><p>
            </p></dt><dt><h3 add_date="1461250448" last_modified="1471533116">Google/SEO Bookmarklets</h3>
            <dl><p>
                </p><dt><a href="javascript: (function(){           if (window.ouiseo === undefined) {            var jsCode = document.createElement('script');            jsCode.setAttribute('src', '//carlsednaoui.s3.amazonaws.com/ouiseo/ouiseo.min.js');            document.body.appendChild(jsCode);          } else if (!!window.ouiseo &amp;&amp; !document.getElementById('ouiseo')) {             ouiseo();           } else {            console.log('ouiseo is already open');          }        })();" add_date="1461250448">SeeMetaInfo</a>
                </dt><dt><a href='javascript:(function(){window.open(  "https://website.grader.com/#/results/"+ location.hostname )})()' add_date="1461250448">Site-Analyzer</a>
                </dt><dt><a href='javascript:(function(){window.open(  "http://socialdebug.com/results?url="+ location.hostname + location.pathname )})()' add_date="1461250448">SocialMetaTagTester</a>
                </dt><dt><a href="javascript:q = &quot;&quot; + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text); if (!q) q = prompt(&quot;You didn't select any text.  Enter a search phrase:&quot;, &quot;&quot;); if (q!=null) location=(&quot;https://www.google.com/search?num=100&amp;q=site:&quot; + escape(location.hostname) + &quot; \&quot;&quot; + escape(q.replace(/\&quot;/g,&quot;&quot;)) + &quot;\&quot;&quot;).replace(/ /g, &quot;+&quot;); void 0" add_date="1461250448">GoogleSiteSearch</a>
                </dt><dt><a href="javascript: window.open('https://www.google.com/search?q=link%3A ' + document.domain)" add_date="1461250448">ShowLinkedSites</a>
                </dt><dt><a href="javascript:(function(){ window.open('http://www.majesticseo.com/reports/site-explorer?folder=&amp;q='+location.host)})();" add_date="1461250448">ViewBacklinks</a>
                </dt><dt><a href="javascript:%20(function%20()%20{%20var%20url%20=%20document.location;%20var%20links%20=%20document.getElementsByTagName('link');%20var%20found%20=%20'Not Found';%20for%20(var%20i%20=%200,%20l;%20l%20=%20links[i];%20i++)%20{%20if%20(l.getAttribute('rel')%20==%20'canonical')%20{%20found%20=%20'Canonical Found\n\nCanonical Reference:\n'+l.getAttribute('href')+'\n\nCurrent URL:\n'+document.location;if(l.getAttribute('href')==document.location){found=found+'\n\nCanonical tag matches current URL.'}else{found=found+'\n\nThe Canonical reference and current URL are different. Canonical fallback in place.'}%20break;%20}%20}%20alert(found);%20})();" add_date="1461250448">Canonical Tag Checker</a>
                </dt><dt><a href='javascript:if(window.getSelection()==""){alert("Highlight a company name then click this bookmarlet")}else{window.open("https://www.yext.com/partner/MobiSquad/listing-report.html?country=US&amp;name="+window.getSelection());};' add_date="1461250448">FindBizListingsbyName</a>
                </dt><dt><a href='javascript:if(window.getSelection()==""){alert("Highlight a company phone # then click this bookmarlet")}else{window.open("https://www.yext.com/partner/MobiSquad/listing-report.html?country=US&amp;name=&amp;address=&amp;city=&amp;state=&amp;zip=&amp;phone="+window.getSelection());};' add_date="1461250448">FindBizListingsby#</a>
                </dt><dt><a href='javascript:(function(){window.open(  "http://iwebchk.com/reports/view/"+ location.hostname + location.pathname )})()' add_date="1461250448">iwebchk.com</a>
            </dt></dl><p>
            </p></dt><dt><h3 add_date="1461250448" last_modified="1461250448">Font/Image Bookmarklets</h3>
            <dl><p>
                </p><dt><a href="javascript:void(function() { if (typeof(fsi_webfonter) === 'undefined') { console.log('load webfonter'); var gaTrack = function (g,h,i){function c(e,j){return e+Math.floor(Math.random()*(j-e))}var f=1000000000,k=c(f,9999999999),a=c(10000000,99999999),l=c(f,2147483647),b=(new Date()).getTime(),d=window.location,m=new Image(),n='https://www.google-analytics.com/__utm.gif?utmwv=1.3&amp;utmn='+k+'&amp;utmsr=-&amp;utmsc=-&amp;utmul=-&amp;utmje=0&amp;utmfl=-&amp;utmdt=-&amp;utmhn='+h+'&amp;utmr='+d+'&amp;utmp='+i+'&amp;utmac='+g+'&amp;utmcc=__utma%3D'+a+'.'+l+'.'+b+'.'+b+'.'+b+'.2%3B%2B__utmb%3D'+a+'%3B%2B__utmc%3D'+a+'%3B%2B__utmz%3D'+a+'.'+b+'.2.2.utmccn%3D(referral)%7Cutmcsr%3D'+d.host+'%7Cutmcct%3D'+d.pathname+'%7Cutmcmd%3Dreferral%3B%2B__utmv%3D'+a+'.-%3B';m.src=n}; var url = '/bookmarklet?url=' + location.host + location.pathname; gaTrack('UA-45420013-1', 'webfonter.fontshop.com', url); var base = '//webfonter.fontshop.com/'; var r = function(u) { return u + '?r='+(Math.round(new Date().getTime()/600000)); }; var sc = function(p, a) { var e = document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src', r(base + p)); if (a) { for (var k in a) { e.setAttribute(k, a[k]); } } document.body.appendChild(e); }; var head = document.getElementsByTagName('head')[0]; if (!head) { head = document.getElementsByTagName('html')[0]; } var ss = function(c) { e = document.createElement('link'); e.setAttribute('type','text/css'); e.setAttribute('rel', 'stylesheet'); e.setAttribute('href',r(base + c)); head.appendChild(e); }; window.require = { baseUrl:base+'js', urlArgs: 'bust=' + (new Date()).getTime(), config: { text: { useXhr:function(url,protocol,hostname,port) { return true; } } } }; window.fsi_webfonter_config = { isDev: true, api: { baseUrl: '//d3otl0lvq84taj.cloudfront.net'+'/webfonter/api/' }, wfs: { ssl: false } }; sc('js/webfonter.js'); ss('css/bookmarklet.css'); ss('css/fsi-swapper.css'); fsi_webfonter = true; } else { if (typeof($) !== 'undefined') { $('#fsi-webfonter').trigger('reopen'); }; } }());" add_date="1461250448">WebFonter</a>
                </dt><dt><a href="javascript:(function(){var d=document,s=d.createElement('scr'+'ipt'),b=d.body,l=d.location;s.setAttribute('src','http://chengyinliu.com/wf.js?o='+encodeURIComponent(l.href)+'&amp;t='+(new Date().getTime()));b.appendChild(s)})();" add_date="1461250448">WhatFont?</a>
                </dt><dt><a href="javascript:(function(d){var s=d.createElement('script'),h=d.head||d.getElementsByTagName('head')[0];s.src=('https:' == document.location.protocol ? 'https://rawgithub.com/ryanseddon/font-dragr/master/bookmarklet/fd-script.js' : 'http://fontdragr.com/bookmarklet/fd-script.js');h.appendChild(s);})(document);" add_date="1461250448">TestYOURFontsOnline</a>
                </dt><dt><a href="javascript:(function()%7Bwindow.open(%20%20%22https%3A%2F%2Fwww.url2png.com%2F%3Furl%3D%22%20%2B%20document.domain)%7D)()" add_date="1461250448">QuickSquareScreenshoot</a>
                </dt><dt><a href="javascript:(function(){ var i,t,D=document; for(i=0;t=D.getElementsByTagName('textarea')[i];++i)t.value=t.value.toLowerCase();/*(in ie, text-transform only applies to first line of textarea)*/ var newSS,styles='*{text-transform:lowercase}input,textarea{text-transform:none}';if(D.createStyleSheet){D.createStyleSheet(&quot;javascript:'&quot;+styles+&quot;'&quot;);}else{newSS=D.createElement('link'); newSS.rel='stylesheet';newSS.href='data:text/css,'+escape(styles);D.getElementsByTagName(&quot;head&quot;)[0].appendChild(newSS);}})()" add_date="1461250448">Make Selection Lowercase</a>
                </dt><dt><a href='javascript:var iGrabSH%3D%27%27%3B(function()%7Bvar L%3D%5B%5D,i%3D0,j,e,D%3Ddocument,u,B%3DD.body,x%3DB.getElementsByTagName(%27*%27),t,f%3D%27banner%7Cseomonitor%7Cpagerank%7Ccounter%7Csitemeter%7Calexa.com%7Clogo%7Cbayumukti%7Ciklan/%7Cmultibet%7Ctipsbola%7Creferral%27.split(%27%7C%27),F%3Dfunction(a)%7Bfor(j%3D0%3Bj<f.length%3B)if(a.indexOf(f%5Bj%2B%2B%5D)>-1)return%3Breturn !0%7D%3Bfor(%3Bi<x.length%3B)%7Bt%3D(e%3Dx%5Bi%2B%2B%5D).tagName.toLowerCase()%3Bif(t%3D%3D%27img%27%26%26e.src%26%26(u%3De.src)%26%26F(u.toLowerCase())%26%26L.indexOf(u)<0%26%26e.naturalWidth>200)L.push(u)%7DiGrabSH%3DB.innerHTML%3BB.innerHTML%3D(L.length%3F%27<h3>Found %27%2BL.length%2B%27 Image(s):</h3><div style%3D"width:100%25%3Bmin-height:80%25%3Bbackground:white%3Bmargin:0%3Bpadding:20px%3Bborder:0%3Boutline:0"><img src%3D"%27%2BL.join(%27"><img src%3D"%27)%2B%27" style%3D"margin:5px"></div>%27:%27<h1>No Image found</h1>%27)%2B%27<div style%3D"position:fixed%3Btop:5px%3Bright:5px%3Bwidth:20px%3Bheight:20px%3Bfont-size:16px%3Bfont-weight:bold%3Bz-index:9999%3Bpadding:2px%3Bmargin:0%3Bopacity:0.8%3Bborder-radius:6px%3Bbackground:%23f55%3Bcursor:pointer%3Bcolor:white%3Btext-align:center%3Bbox-shadow:2px 2px 4px rgba(0,0,0,0.5)" onclick%3D"document.body.innerHTML%3DiGrabSH">X</div>%27%7D)()%3B' add_date="1461250448">ShowTheImages</a>
                </dt><dt><a href="javascript: if(window.location.href.indexOf('jpg') > -1 || window.location.href.indexOf('png') > -1 || window.location.href.indexOf('jpeg') > -1 || window.location.href.indexOf('gif') > -1 )  {window.open('http://metapicz.com/#landing?imgsrc=' + document.location);}else {alert('You need to directly open the image in its own URL. (.jpg, .jpeg, .gif or .png) ')}" add_date="1461250448">Get Image Data(Exif)</a>
                </dt><dt><a href='javascript:window.open("https://www.google.com/search?q=site:" + document.location + "&amp;qscrl=1&amp;source=lnms&amp;tbm=isch")' add_date="1461250448">ShowImagesOnPage</a>
            </dt></dl><p>
            </p></dt><dt><h3 add_date="1461250448" last_modified="1461250448">HTML/CSS/JS Bookmarklets</h3>
            <dl><p>
                </p>
                            <dt><a href="javascript:window.open('http://validator.w3.org/check?uri='+encodeURIComponent(window.location));void 0" add_date="1461250448">W3C HTML Validator</a>
                </dt>
              <dt><a href="javascript:(function() {var _p='//squizlabs.github.io/HTML_CodeSniffer/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();" add_date="1461250448">HTML_CodeSniffer</a>
                </dt>
              <dt><a href='javascript:void((function(){var a,b;a=b=0;(function(c){var d,e,f,g;for(d=0;d<c.length;d++){try{arguments.callee(c.frames[d]);}catch(h){}}e=c.document.forms;for(f=0;f<e.length;f++){g=e[f];if(g.method.toLowerCase()=="post"){g.method="GET";a++;}b++;}})(top);alert(a+" of "+b+" forms changed from POST to GET");})())' add_date="1461250448">ChangeForm2Get</a>
                </dt><dt><a href='javascript:(function(){function callback(){(function($){var jQuery=$;/**code**/droptxt = $("option").text();$("select").contents().unwrap();$("option").contents().unwrap().wrap("<span style=clear:both;display:block; >");/**end-code**/})(jQuery.noConflict(true))}var s=document.createElement("script");s.src="//cdn.jsdelivr.net/jquery/1.10.2/jquery-1.10.2.min.js";if(s.addEventListener){s.addEventListener("load",callback,false)}else if(s.readyState){s.onreadystatechange=callback}document.body.appendChild(s);})()' add_date="1461250448">DropDown2Textlist</a>
                </dt><dt><a href='javascript:(function(){var i,f,j,e,div,label,ne; for(i=0;f=document.forms[i];++i)for(j=0;e=f[j];++j)if(e.type=="hidden"){ D=document; function C(t){return D.createElement(t);} function A(a,b){a.appendChild(b);} div=C("div"); label=C("label"); A(div, label); A(label, D.createTextNode(e.name + ": ")); e.parentNode.insertBefore(div, e); e.parentNode.removeChild(e); ne=C("input");/*for ie*/ ne.type="text"; ne.value=e.value; A(label, ne); label.style.MozOpacity=".6"; --j;/*for moz*/}})()' add_date="1461250448">ShowHiddenFields</a>
                </dt><dt><a href="javascript:function htmlEscape(s){s=s.replace(/&amp;/g,'&amp;');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} function linkEscape(s){s=s.replace(/&amp;/g,'&amp;');s=s.replace(/&quot;/,'&quot;');return s} h = '<a href=&quot;' + linkEscape(location.href) + '&quot;>' + htmlEscape(document.title) + '</a>'; with(window.open().document){write(h+'<form name=f><textarea  name=a rows=5 cols=80 wrap=hard>'+htmlEscape(h)+'</textarea></form>'); close(); f.a.select(); } void 0" add_date="1461250448">CreateLinkt2thisPAGE</a>
                </dt><dt><a href='javascript: var thisvalue = window.getSelection();var linkval = "<a href=%27" + thisvalue + "%27 >Link</a>";  if (thisvalue == "") { alert("Select/highlight text, then click this bookmarlet");  }else { prompt("Copy the link Below:",linkval);}linkval=null;;' add_date="1461250448">LinkFromSelection</a>
                </dt><dt><a href="javascript:(function(){var s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3.0em';s.style.border='2px solid black';s.style.right='40px';s.style.top='40px';s.setAttribute('class','selector_gadget_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','https://dv0akt2986vzh.cloudfront.net/unstable/lib/selectorgadget.js');document.body.appendChild(s);})();" add_date="1461250448">CSSSelectorViewer</a>
                </dt><dt><a href='javascript:(function(){ var d=open().document; d.title="Selection"; if (window.getSelection) { /*Moz*/ var s = getSelection(); for(i=0; i<s.rangeCount; ++i) { var a, r = s.getRangeAt(i); if (!r.collapsed) { var x = document.createElement("div"); x.appendChild(r.cloneContents()); if (d.importNode) x = d.importNode(x, true); d.body.appendChild(x); } } } else { /*IE*/ d.body.innerHTML = document.selection.createRange().htmlText; } })();' add_date="1461250448">Selected Content only</a>
                </dt><dt><a href='javascript:function getSelSource() { x = document.createElement("div"); x.appendChild(window.getSelection().getRangeAt(0).cloneContents()); return x.innerHTML; } function makeHR() { return nd.createElement("hr"); } function makeParagraph(text) { p = nd.createElement("p"); p.appendChild(nd.createTextNode(text)); return p; } function makePre(text) { p = nd.createElement("pre"); p.appendChild(nd.createTextNode(text)); return p; } nd = window.open().document; ndb = nd.body; if (!window.getSelection || !window.getSelection().rangeCount || window.getSelection().getRangeAt(0).collapsed) { nd.title="Generated Source of: " + location.href; ndb.appendChild(makeParagraph("No selection, showing generated source of entire document.")); ndb.appendChild(makeHR()); ndb.appendChild(makePre("<html>\n" + document.documentElement.innerHTML + "\n</html>")); } else { nd.title="Partial Source of: " + location.href; ndb.appendChild(makePre(getSelSource())); }; void 0' add_date="1461250448">Selected HTML source</a>
                </dt><dt><a href="javascript:(function(){function A(n,g){var p=n.parentNode,t=n.tagName;if(!p)return &quot;&quot;;if(!t)return A(p,g);var T=t.toUpperCase(),b=(T!=&quot;TABLE&quot;&amp;&amp;T!=&quot;TBODY&quot;&amp;&amp;T!=&quot;THEAD&quot;&amp;&amp;T!=&quot;TR&quot;),c=n.className,i=n.id;return A(p,' > ')+(b?T:T.toLowerCase())+(c?&quot;.&quot;+c:&quot;&quot;)+(i?&quot;#&quot;+i:&quot;&quot;)+(b?g:' ');}document.onmouseover=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;try{s=A(g,'')+&quot; (click for computed styles)&quot;;}catch(err){s=err.message;}window.status=s;return true;};window.status=A(document.documentElement,'');var newSS,styles='* { cursor: crosshair; }';newSS=document.createElement('link');newSS.rel='stylesheet';newSS.type='text/css';newSS.href='data:text/css,'+escape(styles);document.getElementsByTagName(&quot;head&quot;)[0].appendChild(newSS);document.onclick=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;var x=window.open('','computedStyles');x.document.open();x.document.close();var d=x.document;x.onunload=function(){document.onclick=null;document.onmouseover=null;window.status=null;newSS.href='data:text/css,';};function sp(n,t,col){var r=d.createElement(n);r.appendChild(d.createTextNode(t));if(col)r.style.color=col;return r;}var typeIndex={'top':1,'bottom':1,'height':1,'width':1,'left':1,'right':1,'position':0,'display':0,'-moz-appearance':0,'-moz-box-sizing':0};var colors=[&quot;red&quot;,&quot;green&quot;,&quot;black&quot;];function undirect(v){return v.replace(/\-(left|top|bottom|right)/,&quot;-*&quot;);}function diff(n,p){pcs=p.ownerDocument.defaultView.getComputedStyle(p,&quot;&quot;);ncs=n.ownerDocument.defaultView.getComputedStyle(n,&quot;&quot;);var A=[];var B={};var C={};for(var i=0;i<ncs.length;++i){var e=ncs.item(i),v=ncs.getPropertyValue(e),pv=pcs.getPropertyValue(e);if(v!=pv){var u=undirect(e);if(u.indexOf(&quot;-*&quot;)!=-1){if(!B[u])B[u]=[0,v];if(B[u][1]==v)++(B[u][0]);}A.push([typeIndex[e]!=null?typeIndex[e]:2,e,v]);}}A=A.sort();for(var u in B)if(B[u][0]==4)C[u]=true;for(var i in A){var t=A[i],e=t[1],v=t[2],u=undirect(e);if(C[u]){if(t[1].indexOf(&quot;-left&quot;)!=-1)d.body.appendChild(sp(&quot;div&quot;,u+&quot;: &quot;+v,colors[t[0]]));}else d.body.appendChild(sp(&quot;div&quot;,e+&quot;: &quot;+v,colors[t[0]]));}}function info(n){if(!n)return;if(n.tagName){d.body.appendChild(sp(&quot;h4&quot;,A(n,'')));diff(n,n.parentNode.nodeType!='9'?n.parentNode:d.documentElement);}info(n.parentNode);}d.body.appendChild(sp(&quot;p&quot;,&quot;This shows how the computed style of each node differs from the computed style of its parent. The root element, which has no parent, is instead compared against the root of a blank HTML document.&quot;));info(g);x.focus();e.preventDefault();}})()" add_date="1461250448">Selected CSS Source</a>
                </dt><dt><a href='javascript:var stext = "";var sdom = "";stext = window.getSelection().toString();sdom = document.location;window.prompt("Copy to clipboard: Ctrl+C", stext + " %E2%80%93 ( "+ sdom +" )");stext=null;sdom=null;' add_date="1461250448">Selection+URL</a>
                </dt><dt><a href="javascript:if(typeof(searches)=='undefined'){var searches=0;};(function(){var count=0,text,regexp;text=prompt('Search regex:','');if(text==null||text.length==0)return;try{regexp=new RegExp(text,'i');}catch(er){alert('Unable to create regular expression using text \''+text+'\'.\n\n'+er);return;}function searchWithinNode(node,re){var pos,skip,acronym,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.search(re);if(pos>=0){acronym=document.createElement('ACRONYM');acronym.title='Search '+(searches+1)+': '+re.toString();acronym.style.backgroundColor=backColor;acronym.style.borderTop='1px solid '+borderColor;acronym.style.borderBottom='1px solid '+borderColor;acronym.style.fontWeight='bold';acronym.style.color=borderColor;middlebit=node.splitText(pos);endbit=middlebit.splitText(RegExp.lastMatch.length);middleclone=middlebit.cloneNode(true);acronym.appendChild(middleclone);middlebit.parentNode.replaceChild(acronym,middlebit);count++;skip=1;}}else if(node.nodeType==1&amp;&amp;node.childNodes&amp;&amp;node.tagName.toUpperCase()!='SCRIPT'&amp;&amp;node.tagName.toUpperCase!='STYLE')for(var child=0;child<node.childNodes.length;++child)child=child+searchWithinNode(node.childNodes[child],re);return skip;}var borderColor='#'+(searches+8).toString(2).substr(-3).replace(/0/g,'3').replace(/1/g,'6');var backColor=borderColor .replace(/3/g,'c').replace(/6/g,'f');if(searches%2516/8>=1){var tempColor=borderColor;borderColor=backColor;backColor=tempColor;}searchWithinNode(document.body,regexp);window.status='Found '+count+' match'+(count==1?'':'es')+' for '+regexp+'.';if(count>0)searches++;})();" add_date="1461250448">Regex Search</a>
                </dt><dt><a href="javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200" add_date="1461250448">Edit Website</a>
            </dt></dl><p>
            </p></dt><dt><h3 add_date="1461250448" last_modified="1471533239">Design</h3>
            <dl><p>
                </p><dt><a href="javascript:(function(){var Event=function(){'use strict';this.attach=function(evtName,element,listener,capture){var evt='',useCapture=(capture===undefined)?true:capture,handler=null;if(window.addEventListener===undefined){evt='on'+evtName;handler=function(evt,listener){element.attachEvent(evt,listener);return listener;};}else{evt=evtName;handler=function(evt,listener,useCapture){element.addEventListener(evt,listener,useCapture);return listener;};}return handler.apply(element,[evt,function(ev){var e=ev||event,src=e.srcElement||e.target;listener(e,src);},useCapture]);};this.detach=function(evtName,element,listener,capture){var evt='',useCapture=(capture===undefined)?true:capture;if(window.removeEventListener===undefined){evt='on'+evtName;element.detachEvent(evt,listener);}else{evt=evtName;element.removeEventListener(evt,listener,useCapture);}};this.stop=function(evt){evt.cancelBubble=true;if(evt.stopPropagation){evt.stopPropagation();}};this.prevent=function(evt){if(evt.preventDefault){evt.preventDefault();}else{evt.returnValue=false;}};};var Dragdrop=function(evt){'use strict';var elem=null,started=0,self=this,moveHandler=null,doc=document.documentElement,body=document.body,gWidth=(document.body.scrollWidth>document.documentElement.clientWidth)?document.body.scrollWidth:document.documentElement.clientWidth,gHeight=Math.max(body.scrollHeight,body.offsetHeight,doc.clientHeight,doc.scrollHeight,doc.offsetHeight),move=function(e){var xDiff=e.clientX-elem.posX,yDiff=e.clientY-elem.posY,x=xDiff-(xDiff%elem.snap)+'px',y=yDiff-(yDiff%elem.snap)+'px';if(started===1){switch(elem.mode){case 0:elem.style.top=y;elem.style.left=x;break;case 1:elem.style.left=x;break;case 2:elem.style.top=y;break;}if(elem.mode!==2){if(xDiff<=elem.minX){elem.style.left=elem.minX+'px';}if(elem.offsetLeft+elem.offsetWidth>=elem.maxX){elem.style.left=(elem.maxX-elem.offsetWidth)+'px';}}if(elem.mode!==1){if(yDiff<=elem.minY){elem.style.top=elem.minY+'px';}if(elem.offsetTop+elem.offsetHeight>=elem.maxY){elem.style.top=(elem.maxY-elem.offsetHeight)+'px';}}elem.onMove(elem);}},start=function(e,src){if(src.className.indexOf('draggable')!==-1){evt.prevent(e);moveHandler=evt.attach('mousemove',document,move,true);started=1;elem=src;elem.posX=e.clientX-elem.offsetLeft;elem.posY=e.clientY-elem.offsetTop;if(elem.mode===undefined){self.set(elem);}elem.onStart(elem);if(elem.setCapture){elem.setCapture();}}},stop=function(){if(started===1){started=0;elem.onStop(elem);evt.detach('mousemove',document,moveHandler);if(elem.releaseCapture){elem.releaseCapture();}}};evt.attach('mousedown',document,start,false);evt.attach('mouseup',document,stop,false);this.start=start;this.set=function(element,elemOptions){var options=elemOptions||{};elem=(typeof element==='string')?document.getElementById(element):element;elem.mode=options.mode||0;elem.minX=options.minX||0;elem.maxX=options.maxX||gWidth;elem.minY=options.minY||0;elem.maxY=options.maxY||gHeight;elem.snap=options.snap||1;elem.onStart=options.onstart||function(){};elem.onMove=options.onmove||function(){};elem.onStop=options.onstop||function(){};elem.style.left=elem.offsetLeft+'px';elem.style.top=elem.offsetTop+'px';elem.unselectable='on';};};var RulersGuides=function(evt,dragdrop){'use strict';var doc=document.documentElement,body=document.body,wrapper=null,lockHandler=null,locked=1,hRuler=null,vRuler=null,menu=null,dialogs=[],snapDialog=null,openGridDialog=null,xSnap=0,ySnap=0,mode=2,guides={},guidesCnt=0,gUid='',rulerStatus=1,guideStatus=1,hBound=0,vBound=0,gridList=null,gridListLen=0,menuBtn=null,gInfoBlockWrapper=null,detailsStatus=0,domElements=[],domDimensions=[],resizeTimer=null,snapDom=0,cssText='html,body{margin:0;padding:0}.rg-overlay{position:absolute;top:0;left:0;overflow:hidden}.guide{position:absolute;top:0;left:0;z-index:9991;font-size:0}.guide.v{width:1px;height:7000px;border-right:solid 1px #00f;cursor:col-resize}.guide.h{width:3000px;height:1px;border-bottom:solid 1px #00f;cursor:row-resize}.info{width:50px;height:25px;line-height:25px;text-align:center;position:relative;font-size:13px;background-color:#eee;border:solid 1px #ccc;color:#000}.guide.v .info{left:2px}.guide.h .info{top:2px}.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ruler{background-color:#ccc;position:absolute;top:0;left:0;z-index:9990}.ruler .label{font:12px Arial;color:#000}.ruler,.ruler span{font-size:0}.ruler.h{width:3000px;left:-1px;padding-top:14px;border-bottom:solid 1px #000}.ruler.v{height:7000px;top:-1px;padding-left:16px;width:25px;border-right:solid 1px #000}.ruler.h span{border-left:solid 1px #999;height:9px;width:1px;vertical-align:bottom;display:inline-block;*display:inline;zoom:1}.ruler.v span{display:block;margin-left:auto;margin-right:0;border-top:solid 1px #999;width:9px;height:1px}.ruler.v span.major{border-top:solid 1px #000;width:13px}.ruler.v span.milestone{position:relative;border-top:solid 1px #000;width:17px}.ruler.v span.label{border:0;font-size:9px;position:absolute;text-align:center;width:9px}.ruler.h span.major{border-left:solid 1px #000;height:13px}.ruler.h span.milestone{position:relative;border-left:solid 1px #000;height:17px}.ruler.h span.label{border:0;font-size:9px;position:absolute;text-align:center;top:-14px;width:9px}.ruler.h .l10{left:-5px}.ruler.h .l100{left:-7px}.ruler.h .l1000{left:-10px}.ruler.v .l10,.ruler.v .l100,.ruler.v .l1000{top:-7px}.ruler.v .l10{left:-12px}.ruler.v .l100{left:-17px}.ruler.v .l1000{left:-23px}.menu-btn{position:fixed;left:3px;top:2px;line-height:9px;z-index:9998;width:20px;height:20px;background-color:red;opacity:.5;font-size:20px;text-align:left;color:#fff;font-weight:700;cursor:pointer;border-radius:2px}.rg-menu{position:fixed;top:22px;left:3px;padding:0;margin:0;list-style:0;display:none;font:13px Arial;z-index:9999;box-shadow:2px 2px 10px #ccc}.rg-menu li{border-bottom:solid 1px #999;padding:0}.rg-menu a{background-color:#777;display:block;padding:5px;text-decoration:none;color:#fff;line-height:18px}.rg-menu a:hover,.rg-menu a.selected{color:#fff;background-color:#3b94ec}.rg-menu a.disabled{color:#ccc}.rg-menu .desc{display:inline-block;width:170px}.dialog{position:fixed;background-color:#777;z-index:9999;color:#fff;font-size:13px;display:none;box-shadow:2px 2px 10px #ccc}.dialog button{border:0;color:#333;cursor:pointer;background-color:#eaeaea;background-image:linear-gradient(#fafafa,#eaeaea);background-repeat:repeat-x;border-radius:3px;text-shadow:0 1px 0 rgba(255,255,255,.9)}.dialog input,.dialog select,.dialog button{font-size:13px;margin:3px;padding:3px}.dialog .title-bar{padding:5px;background-color:#aaa;font-weight:700}.dialog .wrapper{padding:10px}.open-dialog select,.open-dialog button{float:left;display:block}.open-dialog .ok-btn,.open-dialog .cancel-btn{margin:10px 3px}.open-dialog .ok-btn{clear:both}.snap-dialog label{font-weight:700;padding:3px}.snap-dialog .ok-btn{margin-left:18px}.snap-dialog .ok-btn,.snap-dialog .cancel-btn{margin-top:10px}.snap-dialog .rg-y-label{margin-left:10px}#rg-x-snap,#rg-y-snap{width:50px}.info-block-wrapper{position:absolute;z-index:9989}.info-block{position:absolute;text-align:left}.info-block.even{background:0;background-color:rgba(0,0,255,.2);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF, endColorstr=#330000FF);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF, endColorstr=#330000FF);zoom:1}.info-block.odd{background:0;background-color:rgba(255,0,0,.2);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000, endColorstr=#33FF0000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000, endColorstr=#33FF0000);zoom:1}.info-block-txt{padding:5px;display:inline-block;vertical-align:top;background-color:#777;color:#fff;font-size:13px;*display:inline;zoom:1}',Ruler=function(type,size){var ruler=document.createElement('div'),i=0,span=document.createElement('span'),label=null,labelTxt=null,spanFrag=document.createDocumentFragment(),cnt=Math.floor(size/2);ruler.className='ruler '+type+' unselectable';for(i;i<cnt;i=i+1){span=span.cloneNode(false);if(i% 25===0){span.className='milestone';if(i>0){label=span.cloneNode(false);label.className='label';if(i<50){label.className+=' l10';}else if(i>=50&amp;&amp;i<500){label.className+=' l100';}else if(i>=500){label.className+=' l1000';}labelTxt=document.createTextNode(i*2);label.appendChild(labelTxt);span.appendChild(label);}span.className='milestone';}else if(i%5===0){span.className='major';}else{span.className='';span.removeAttribute('class');}spanFrag.appendChild(span);}ruler.appendChild(spanFrag);return ruler;},getWindowSize=function(){var w=Math.max(body.scrollWidth,body.offsetWidth,doc.clientWidth,doc.scrollWidth,doc.offsetWidth),h=Math.max(body.scrollHeight,body.offsetHeight,doc.clientHeight,doc.scrollHeight,doc.offsetHeight);return[w,h];},getScrollPos=function(){var t=Math.max(doc.scrollTop,body.scrollTop),l=Math.max(doc.scrollLeft,body.scrollLeft);return[t,l];},getScrollSize=function(){var w=Math.max(doc.scrollWidth,body.scrollWidth),h=Math.max(doc.scrollHeight,body.scrollHeight);return[w,h];},closeAllDialogs=function(){var i=0;for(i;i<dialogs.length;i=i+1){dialogs[i].close();}},removeInboundGuide=function(guide,gUid){var scrollPos=getScrollPos();if(rulerStatus===1&amp;&amp;guideStatus===1&amp;&amp;((guide.className==='guide h draggable'&amp;&amp;guide.offsetTop<hBound+scrollPos[0])||(guide.className==='guide v draggable'&amp;&amp;guide.offsetLeft<vBound+scrollPos[1]))){wrapper.removeChild(guide);delete guides[gUid];guidesCnt=guidesCnt-1;}},removeInboundGuides=function(){var i;for(i in guides){if(guides.hasOwnProperty(i)){removeInboundGuide(guides[i],i);}}},toggleGuides=function(){var i;guideStatus=1-guideStatus;for(i in guides){if(guides.hasOwnProperty(i)){guides[i].style.display=(guideStatus===1)?'block':'none';}}if(guideStatus===1){wrapper.style.display='block';}},toggleRulers=function(){rulerStatus=1-rulerStatus;if(rulerStatus===1){vRuler.style.display='block';hRuler.style.display='block';wrapper.style.display='block';removeInboundGuides();}else{vRuler.style.display='none';hRuler.style.display='none';}},removeGrid=function(gridName){if(gridList[gridName]!==undefined){delete gridList[gridName];window.localStorage.setItem('RulersGuides',JSON.stringify(gridList));gridListLen=gridListLen-1;}},deleteGuides=function(){var i;if(guidesCnt>0){for(i in guides){if(guides.hasOwnProperty(i)){wrapper.removeChild(guides[i]);delete guides[i];guidesCnt=guidesCnt-1;}}gInfoBlockWrapper.style.display='none';}},renderGrid=function(gridName){if(gridList[gridName]!==undefined){var grid=gridList[gridName],guideId=null,guideElem=null;deleteGuides();for(guideId in grid){if(grid.hasOwnProperty(guideId)){guideElem=document.createElement('div');guideElem.id=guideId;guideElem.className=grid[guideId].cssClass;guideElem.style.cssText=grid[guideId].style;wrapper.appendChild(guideElem);guides[guideId]=guideElem;guidesCnt=guidesCnt+1;}}}},OpenGridDialog=function(){var dialog=null,self=this,select=null,renderSelect=function(insertOrUpdate){var gridName,options='',i;gridListLen=0;if(window.localStorage){gridList=JSON.parse(window.localStorage.getItem('RulersGuides'));for(i in gridList){if(gridList.hasOwnProperty(i)){gridListLen=gridListLen+1;}}}if(insertOrUpdate===0){select=document.createElement('select');select.id='grid-list';}if(gridListLen>0){for(gridName in gridList){if(gridList.hasOwnProperty(gridName)){options+='<option>'+gridName+'</option>';}}select.innerHTML=options;}return select;};this.render=function(){if(dialog===null){dialog=document.createElement('div');select=renderSelect(0);var text=document.createTextNode(''),titleBar=dialog.cloneNode(false),dialogWrapper=dialog.cloneNode(false),okBtn=document.createElement('button'),cancelBtn=okBtn.cloneNode(false),delBtn=okBtn.cloneNode(false),titleBarTxt=text.cloneNode(false),okBtnTxt=text.cloneNode(false),cancelBtnTxt=text.cloneNode(false),delBtnTxt=text.cloneNode(false);titleBarTxt.nodeValue='Open grid';okBtnTxt.nodeValue='OK';cancelBtnTxt.nodeValue='Cancel';delBtnTxt.nodeValue='Delete';dialog.className='dialog open-dialog';titleBar.className='title-bar';dialogWrapper.className='wrapper';okBtn.className='ok-btn';cancelBtn.className='cancel-btn';delBtn.className='del-btn';titleBar.appendChild(titleBarTxt);okBtn.appendChild(okBtnTxt);cancelBtn.appendChild(cancelBtnTxt);delBtn.appendChild(delBtnTxt);dialogWrapper.appendChild(select);dialogWrapper.appendChild(delBtn);dialogWrapper.appendChild(okBtn);dialogWrapper.appendChild(cancelBtn);dialog.appendChild(titleBar);dialog.appendChild(dialogWrapper);body.appendChild(dialog);evt.attach('click',delBtn,function(){if(window.confirm('Are you sure ?')){if(select.options.length>0){removeGrid(select.options[select.selectedIndex].value);select.removeChild(select.options[select.selectedIndex]);}if(select.options.length===0){self.close();}}});evt.attach('click',okBtn,function(){renderGrid(select.value);self.close();});evt.attach('click',cancelBtn,function(){self.close();});}};this.render();this.open=function(){closeAllDialogs();renderSelect(1);if(gridListLen>0){dialog.style.display='block';dialog.style.left=((doc.clientWidth-dialog.clientWidth)/2)+'px';dialog.style.top=((doc.clientHeight-dialog.clientHeight)/2)+'px';}};this.close=function(){dialog.style.display='none';};},toggleRulersLock=function(){if(locked===0){if(lockHandler!==null){evt.detach('scroll',window,lockHandler);}}else{lockHandler=evt.attach('scroll',window,function(){var pos=getScrollPos(),size=getScrollSize();hRuler.style.top=pos[0]+'px';wrapper.style.height=size[1]+'px';vRuler.style.left=pos[1]+'px';wrapper.style.width=size[0]+'px';});}locked=1-locked;},saveGrid=function(){var data={},gridData={},i,gridName='';while(gridName===''&amp;&amp;guidesCnt>0){gridName=window.prompt('Save grid as');if(gridName!==''&amp;&amp;gridName!==false&amp;&amp;gridName!==null&amp;&amp;window.localStorage){for(i in guides){if(guides.hasOwnProperty(i)){gridData[i]={'cssClass':guides[i].className,'style':guides[i].style.cssText};}}if(window.localStorage.getItem('RulersGuides')!==null){data=JSON.parse(window.localStorage.getItem('RulersGuides'));}data[gridName]=gridData;window.localStorage.setItem('RulersGuides',JSON.stringify(data));gridListLen=gridListLen+1;}}},showDetailedInfo=function(){var i,j=0,hGuides=[],vGuides=[],scrollSize=getScrollSize(),infoBlockWrapper=document.createElement('div'),infoFrag=document.createDocumentFragment(),infoBlock=infoBlockWrapper.cloneNode(false),infoBlockTxt=infoBlockWrapper.cloneNode(false),infoData1=document.createTextNode(''),infoData2=infoData1.cloneNode(false),text='',br=document.createElement('br');for(i in guides){if(guides.hasOwnProperty(i)){if(guides[i].type==='h'){hGuides.push(guides[i].y);}else{vGuides.push(guides[i].x);}}}vGuides.unshift(0);vGuides.push(scrollSize[0]);hGuides.unshift(0);hGuides.push(scrollSize[1]);vGuides=vGuides.sort(function(a,b){return a-b;});hGuides=hGuides.sort(function(a,b){return a-b;});for(i=0;i<hGuides.length-1;i=i+1){j=0;for(j;j<vGuides.length-1;j=j+1){infoBlock=infoBlock.cloneNode(false);infoBlockTxt=infoBlockTxt.cloneNode(false);infoData1=infoData1.cloneNode(false);infoData2=infoData2.cloneNode(false);br=br.cloneNode();infoBlockWrapper.className='info-block-wrapper';infoBlock.className='info-block';infoBlockTxt.className='info-block-txt';infoBlock.className+=((i%2!==0&amp;&amp;j%2!==0)||(i%2===0&amp;&amp;j%2===0))?' even':' odd';infoBlock.style.top=hGuides[i]+'px';infoBlock.style.left=vGuides[j]+'px';infoBlock.style.width=(vGuides[j+1]-vGuides[j])+'px';infoBlock.style.height=(hGuides[i+1]-hGuides[i])+'px';text=(vGuides[j+1]-vGuides[j])+' x '+(hGuides[i+1]-hGuides[i]);infoData1.nodeValue=text;text=hGuides[i]+' : '+vGuides[j];infoData2.nodeValue=text;infoBlockTxt.appendChild(infoData1);infoBlockTxt.appendChild(br);infoBlockTxt.appendChild(infoData2);infoBlock.appendChild(infoBlockTxt);infoBlockTxt.style.marginTop=(i===0)?'31px':'0';infoBlockTxt.style.marginLeft=(j===0)?'42px':'0';infoFrag.appendChild(infoBlock);}}infoBlockWrapper.appendChild(infoFrag);if(detailsStatus===1){wrapper.replaceChild(infoBlockWrapper,gInfoBlockWrapper);gInfoBlockWrapper=infoBlockWrapper;}else{gInfoBlockWrapper.style.display='none';}},calculateDomDimensions=function(){var x=[],y=[],dm=[],i=0,len=domElements.length,findDimensions=function(elem){var t=0,l=0,w=elem.offsetWidth,h=elem.offsetHeight;while(elem){l+=(elem.offsetLeft-elem.scrollLeft+elem.clientLeft);t+=(elem.offsetTop-elem.scrollTop+elem.clientTop);elem=elem.offsetParent;}return[l,t,l+w,t+h];},getUnique=function(arr){var u={},a=[],idx=0,arrLen=arr.length;for(idx;idx<arrLen;idx=idx+1){if(u.hasOwnProperty(arr[idx])===false){a.push(arr[idx]);u[arr[idx]]=1;}}return a;};for(i;i<len;i=i+1){dm=findDimensions(domElements[i]);x.push(dm[0]);x.push(dm[2]);y.push(dm[1]);y.push(dm[3]);}x=getUnique(x).sort(function(a,b){return a-b;});y=getUnique(y).sort(function(a,b){return a-b;});return[x,y];},Menu=function(){var menuList=null,status=0,toggles={},menuItemsList=[{'text':'Hide rulers','hotkey':'Ctrl + Alt + R','alias':'rulers'},{'text':'Hide guides','hotkey':'Ctrl + Alt + G','alias':'guides'},{'text':'Hide all','hotkey':'Ctrl + Alt + A','alias':'all'},{'text':'Unlock rulers','hotkey':'Ctrl + Alt + L','alias':'lock'},{'text':'Clear all guides','hotkey':'Ctrl + Alt + D','alias':'clear'},{'text':'Open grid','hotkey':'Ctrl + Alt + O','alias':'open'},{'text':'Save grid','hotkey':'Ctrl + Alt + G','alias':'save'},{'text':'Snap to','hotkey':'Ctrl + Alt + C','alias':'snap'},{'text':'Show detailed info','hotkey':'Ctrl + Alt + I','alias':'details'},{'text':'Snap to DOM','hotkey':'Ctrl + Alt + E','alias':'snapdom'}],i=0;this.render=function(){menuBtn=document.createElement('div');menuBtn.className='menu-btn unselectable';menuBtn.appendChild(document.createTextNode('\u250C'));menuList=document.createElement('ul');menuList.className='rg-menu';var menuItems=document.createDocumentFragment(),li=document.createElement('li'),liLink=document.createElement('a'),liDesc=document.createElement('span'),liHotKey=liDesc.cloneNode(false),liDescTxt=document.createTextNode(''),liHotKeyTxt=liDescTxt.cloneNode(false);liLink.href='javascript:';liDesc.className='desc';liHotKey.className='hotkey';for(i;i<menuItemsList.length;i=i+1){li=li.cloneNode(false);liLink=liLink.cloneNode(false);liDesc=liDesc.cloneNode(false);liHotKey=liHotKey.cloneNode(false);liDescTxt=liDescTxt.cloneNode(false);liHotKeyTxt=liHotKeyTxt.cloneNode(false);liDescTxt.nodeValue=menuItemsList[i].text;liHotKeyTxt.nodeValue=menuItemsList[i].hotkey;liDesc.appendChild(liDescTxt);liHotKey.appendChild(liHotKeyTxt);liLink.appendChild(liDesc);liLink.appendChild(liHotKey);li.appendChild(liLink);menuItems.appendChild(li);toggles[menuItemsList[i].alias]={obj:liLink,txt:liDescTxt};}evt.attach('mousedown',toggles.rulers.obj,function(){toggleRulers();});evt.attach('mousedown',toggles.guides.obj,function(){toggleGuides();});evt.attach('mousedown',toggles.all.obj,function(){if(rulerStatus===1||guideStatus===1){rulerStatus=guideStatus=1;wrapper.style.display='none';}else{rulerStatus=guideStatus=0;wrapper.style.display='block';}toggleRulers();toggleGuides();});evt.attach('mousedown',toggles.lock.obj,function(){toggleRulersLock();});evt.attach('mousedown',toggles.clear.obj,function(){deleteGuides();});evt.attach('mousedown',toggles.open.obj,function(){openGridDialog.open();});evt.attach('mousedown',toggles.save.obj,function(){saveGrid();});evt.attach('mousedown',toggles.snap.obj,function(){snapDialog.open();});evt.attach('mousedown',toggles.details.obj,function(){detailsStatus=1-detailsStatus;showDetailedInfo();});evt.attach('mousedown',toggles.snapdom.obj,function(){snapDom=1-snapDom;if(snapDom===1){domDimensions=calculateDomDimensions();}});menuList.appendChild(menuItems);body.appendChild(menuBtn);body.appendChild(menuList);evt.attach('mousedown',menuBtn,function(){toggles.rulers.txt.nodeValue=(rulerStatus===1)?'Hide rulers':'Show rulers';if(guidesCnt>0){toggles.guides.obj.className='';toggles.clear.obj.className='';toggles.save.obj.className='';toggles.guides.txt.nodeValue=(guideStatus===1)?'Hide guides':'Show guides';}else{toggles.guides.obj.className='disabled';toggles.clear.obj.className='disabled';toggles.save.obj.className='disabled';}toggles.all.txt.nodeValue=(rulerStatus===1||guideStatus===1)?'Hide all':'Show all';toggles.lock.txt.nodeValue=(locked===0)?'Lock rulers':'Unlock rulers';toggles.details.txt.nodeValue=(detailsStatus===0)?'Show detailed info':'Hide detailed info';toggles.snapdom.txt.nodeValue=(snapDom===0)?'Snap to DOM':'Turn off snap to DOM';toggles.open.obj.className=(gridListLen>0)?'':'disabled';menuList.style.display=(status===0)?'inline-block':'none';status=1-status;});};this.render();this.close=function(){if(menuList!==null){menuList.style.display='none';status=0;}};},SnapDialog=function(){var dialog=null,xInput=null,yInput=null,self=this;this.render=function(){if(dialog===null){dialog=document.createElement('div');xInput=document.createElement('input');yInput=xInput.cloneNode(false);var text=document.createTextNode(''),okBtn=document.createElement('button'),xLabel=document.createElement('label'),titleBar=dialog.cloneNode(false),dialogWrapper=dialog.cloneNode(false),inputWrapper=dialog.cloneNode(false),btnWrapper=dialog.cloneNode(false),resetBtn=okBtn.cloneNode(false),cancelBtn=okBtn.cloneNode(false),yLabel=xLabel.cloneNode(false),titleBarTxt=text.cloneNode(false),xLabelTxt=text.cloneNode(false),yLabelTxt=text.cloneNode(false),okBtnTxt=text.cloneNode(false),resetBtnTxt=text.cloneNode(false),cancelBtnTxt=text.cloneNode(false);titleBarTxt.nodeValue='Snap guides to';xLabelTxt.nodeValue='X';yLabelTxt.nodeValue='Y';okBtnTxt.nodeValue='OK';resetBtnTxt.nodeValue='Reset';cancelBtnTxt.nodeValue='Cancel';dialog.className='dialog snap-dialog';titleBar.className='title-bar';dialogWrapper.className='wrapper';xLabel.className='rg-x-label';xLabel.setAttribute('for','rg-x-snap');yLabel.className='rg-y-label';yLabel.setAttribute('for','rg-y-snap');xInput.setAttribute('type','number');xInput.value='100';xInput.id='rg-x-snap';xInput.setAttribute('type','number');yInput.value='100';yInput.id='rg-y-snap';okBtn.className='ok-btn';resetBtn.className='reset-btn';cancelBtn.className='cancel-btn';titleBar.appendChild(titleBarTxt);xLabel.appendChild(xLabelTxt);yLabel.appendChild(yLabelTxt);okBtn.appendChild(okBtnTxt);resetBtn.appendChild(resetBtnTxt);cancelBtn.appendChild(cancelBtnTxt);inputWrapper.appendChild(xLabel);inputWrapper.appendChild(xInput);inputWrapper.appendChild(yLabel);inputWrapper.appendChild(yInput);inputWrapper.appendChild(resetBtn);btnWrapper.appendChild(okBtn);btnWrapper.appendChild(cancelBtn);dialogWrapper.appendChild(inputWrapper);dialogWrapper.appendChild(btnWrapper);dialog.appendChild(titleBar);dialog.appendChild(dialogWrapper);body.appendChild(dialog);evt.attach('mousedown',okBtn,function(){xSnap=parseInt(xInput.value,10);ySnap=parseInt(yInput.value,10);self.close();});evt.attach('mousedown',resetBtn,function(){xSnap=0;ySnap=0;self.close();});evt.attach('mousedown',cancelBtn,function(){self.close();});}};this.render();this.open=function(){closeAllDialogs();dialog.style.display='block';dialog.style.left=((doc.clientWidth-dialog.clientWidth)/2)+'px';dialog.style.top=((doc.clientHeight-dialog.clientHeight)/2)+'px';};this.close=function(){dialog.style.display='none';};},prepare=function(){var style=document.createElement('style'),size=getWindowSize(),elements=document.getElementsByTagName('*'),len=elements.length,i=0;for(i;i<len;i=i+1){domElements.push(elements[i]);}style.setAttribute('type','text/css');if(style.styleSheet){style.styleSheet.cssText=cssText;}else{style.appendChild(document.createTextNode(cssText));}body.appendChild(style);setTimeout(function(){hRuler=new Ruler('h',3000);vRuler=new Ruler('v',7000);wrapper=document.createElement('div');gInfoBlockWrapper=wrapper.cloneNode(false);wrapper.className='rg-overlay';gInfoBlockWrapper.className='info-block-wrapper';wrapper.style.width=(size[0])+'px';wrapper.style.height=(size[1])+'px';wrapper.appendChild(hRuler);wrapper.appendChild(vRuler);wrapper.appendChild(gInfoBlockWrapper);body.appendChild(wrapper);domDimensions=calculateDomDimensions();menu=new Menu();snapDialog=new SnapDialog();openGridDialog=new OpenGridDialog();dialogs=[snapDialog,openGridDialog];},10);};prepare();this.status=1;this.disable=function(){if(vRuler!==null){deleteGuides();vRuler.style.display='none';hRuler.style.display='none';wrapper.style.display='none';menuBtn.style.display='none';}rulerStatus=0;this.status=0;};this.enable=function(){if(vRuler!==null){vRuler.style.display='block';hRuler.style.display='block';wrapper.style.display='block';menuBtn.style.display='block';}rulerStatus=1;this.status=1;};evt.attach('mousedown',document,function(e,src){var x=e.clientX,y=e.clientY,guide=null,guideInfo=null,guideInfoText=null,scrollPos=getScrollPos(),snap=0;if(src.className.indexOf('menu-btn')===-1){menu.close();}if(vBound===0){vBound=vRuler.offsetWidth;hBound=hRuler.offsetHeight;}if(((x>vBound&amp;&amp;y<hBound)||(y>hBound&amp;&amp;x<vBound))&amp;&amp;rulerStatus===1){guide=document.createElement('div');guideInfo=guide.cloneNode(false);guideInfoText=document.createTextNode('');gUid='guide-'+guidesCnt;guideInfo.className='info';guideInfo.appendChild(guideInfoText);guide.appendChild(guideInfo);if(x>vBound&amp;&amp;y<hBound){guide.className='guide h draggable';guide.style.top=(e.clientY+scrollPos[0])+'px';guideInfo.style.left=(x+scrollPos[1]+10)+'px';guide.type='h';snap=ySnap;mode=2;}else if(y>hBound&amp;&amp;x<vBound){guide.className='guide v draggable';guide.style.left=(x+scrollPos[1])+'px';guideInfo.style.top=((y+scrollPos[0])-35)+'px';guide.type='v';snap=xSnap;mode=1;}guide.id=gUid;guide.info=guideInfo;guide.text=guideInfoText;guide.x=0;guide.y=0;guides[gUid]=guide;wrapper.appendChild(guide);dragdrop.set(guide,{mode:mode,onstart:function(elem){var text=(elem.mode===1)?parseInt(elem.style.left,10)+2:parseInt(elem.style.top,10)+2;elem.text.nodeValue=text+'px';if(elem.over!==undefined){evt.detach('mouseover',elem,elem.over);evt.detach('mouseout',elem,elem.out);}},onmove:function(elem){var text='',pos=0,dims=[],len=0,i=0;pos=(elem.mode===1)?elem.style.left:elem.style.top;pos=parseInt(pos,10);if(snapDom===1){dims=domDimensions[elem.mode-1];for(i,len=dims.length;i<len;i=i+1){if(pos<=dims[i]){pos=dims[i];break;}}}text=pos+'px';if(elem.mode===1){elem.style.left=(pos-2)+'px';elem.x=pos;}else{elem.style.top=(pos-2)+'px';elem.y=pos;}elem.text.nodeValue=text;},onstop:function(elem){elem.over=evt.attach('mouseover',elem,function(e,src){if(src.className==='guide v draggable'){elem.info.style.top=((e.clientY+scrollPos[0])-35)+'px';}else if(src.className==='guide h draggable'){elem.info.style.left=(e.clientX+scrollPos[1]+10)+'px';}elem.info.style.display='block';});elem.out=evt.attach('mouseout',elem,function(){elem.info.style.display='none';});},snap:snap});dragdrop.start(e,guide);guidesCnt=guidesCnt+1;}});evt.attach('mouseup',document,function(e,src){removeInboundGuide(src,src.id);if(detailsStatus===1){showDetailedInfo();}});evt.attach('keyup',document,function(e){if(e.ctrlKey===true&amp;&amp;e.altKey===true){switch(e.keyCode){case 83:saveGrid();break;case 82:toggleRulers();break;case 79:openGridDialog.open();break;case 76:toggleRulersLock();break;case 73:detailsStatus=1-detailsStatus;showDetailedInfo();break;case 71:toggleGuides();break;case 69:snapDom=1-snapDom;if(snapDom===1){domDimensions=calculateDomDimensions();}break;case 68:deleteGuides();break;case 67:snapDialog.open();break;case 65:if(rulerStatus===1||guideStatus===1){rulerStatus=guideStatus=1;wrapper.style.display='none';}else{rulerStatus=guideStatus=0;wrapper.style.display='block';}toggleRulers();toggleGuides();break;}}});evt.attach('resize',window,function(){var size=getWindowSize();wrapper.style.width=size[0]+'px';wrapper.style.height=size[1]+'px';if(resizeTimer!==null){window.clearTimeout(resizeTimer);}if(snapDom===1){resizeTimer=window.setTimeout(function(){domDimensions=calculateDomDimensions();},100);}});};var evt=new Event(),dragdrop=new Dragdrop(evt);if(window.rg===undefined){window.rg=new RulersGuides(evt,dragdrop);window.rg.status=0;}if(window.rg.status===1){window.rg.disable();}else{window.rg.enable();}})()" add_date="1461250448">Rulers&amp;Guides</a>
                </dt><dt><a href="javascript:function fnStartDesign(sUrl) {var nScript = document.createElement('script');nScript.setAttribute('language','JavaScript');nScript.setAttribute('src',sUrl);document.body.appendChild(nScript);}fnStartDesign('//www.sprymedia.co.uk/design/design/media/js/design-loader.js');" add_date="1470856236">Rulers-Grid</a>
                </dt><dt><a href="javascript:void((function(d)%7Bvar e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//www.typesample.com/assets/typesample.js?r='+Math.random()*99999999);d.body.appendChild(e)%7D)(document));" add_date="1461250448">View&amp;TryFont</a>
                </dt><dt><a href='javascript: var innerWidth72043 = document.documentElement.clientWidth;    var linkval= "@media all and (max-width:"+  innerWidth72043 +"px) { /* CodeHere */ }";        prompt("Here is the media CSS tag with the browsers current width:",linkval);linkval=null;;' add_date="1461250448">GetViewport4CSS</a>
                </dt><dt><a href="javascript: window.open('http://www.modern.ie/en-us/screenshots#' + document.location)" add_date="1461250448">MutiBrowserScreenshots</a>
            </dt></dl><p>
            </p></dt><dt><h3 add_date="1461250448" last_modified="1471533367">Other Bookmarklets</h3>
            <dl><p>
                </p><dt><a href="javascript:(function(){window.open('http://savefrom.net/?url='+encodeURIComponent(location.href)+'&amp;utm_source=bookmarklet&amp;utm_medium=bookmarklet&amp;utm_campaign=bookmarklet');})()" add_date="1461250448">DownloadMediaFromSite</a>
                </dt><dt><a href="javascript:function __cp(){var d=document,z=d.createElement('script'),b=d.body;try{if(!b)throw(0);z.setAttribute('src','//assets.codepen.io/assets/bk/bk.js?t='+(new Date().getTime()));b.appendChild(z)}catch(e){alert('Try again when the page loads.')}}__cp();void(0);" add_date="1461250448">CodePen</a>
                </dt><dt><a href="javascript:(%0A%28function%28%29%7Bwindow.baseUrl%3D%27//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/read.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)" add_date="1461250448">JustCleanText</a>
                </dt><dt><a href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&amp;&amp;(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2',function(){loadScript('https://css-tricks.com/examples/ThePrintliminator/js/printliminator.js',function(){printlimator()})})})()" add_date="1461250448">Printliminator</a>
                </dt><dt><a href='javascript:if (window.getSelection() == ""){ alert("Highlight the name of the movie or TV Show. bookmarlet")}else{window.open("http://www.rottentomatoes.com/search/?search="+window.getSelection());};' add_date="1461250448">RottenTomatoes</a>
                </dt><dt><a href='javascript:if (window.getSelection() == ""){ alert("Highlight a Email address then click this bookmarlet")}else{window.open("https://pipl.com/search/?q=" +encodeURIComponent(window.getSelection())+"&amp;l=&amp;sloc=&amp;in=5");};' add_date="1461250448">WhoAreYou?(Email)</a>
                </dt><dt><a href='javascript:if (window.getSelection() == ""){ alert("Highlight a Phone Number then click this bookmarlet")}else{window.open("http://www.truecaller.com/us/" +window.getSelection());};' add_date="1461250448">WhoAreYou?(Phone)</a>
                </dt><dt><a href='javascript:if (window.getSelection() == ""){ alert("Highlight a IP address then click this bookmarlet")}else{window.open("https://www.iplocation.net/?query=" +window.getSelection());};' add_date="1461250448">Locate-IP</a>
                </dt><dt><a href="javascript:function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=element.childNodes;for(var n=0;n<nodes.length;n++){if(nodes[n].nodeType==Node.TEXT_NODE){nodes[n].textContent=nodes[n].textContent.replace(new RegExp(a,'gi'),b);}else{htmlreplace(a,b,nodes[n]);}}}htmlreplace(prompt(&quot;Text to replace:&quot;,&quot;old&quot;),prompt(&quot;Replacement text:&quot;,&quot;new&quot;));" add_date="1461250448">Find&amp;Relpace</a>
                </dt><dt><a href="javascript:(function()%7Bvar%20r%20%3D%20%2F%5E.*(%3F%3Avimeo%5C.com%5C%2F(%5Cw%7B8%7D)%7C(%3F%3Ayoutu.be%5C%2F%7Cv%5C%2F%7Cu%5C%2F%5Cw%5C%2F%7Cembed%5C%2F%7Cv%3D)(%5B%5E%23%5C%26%5C%3F%20%5D*)).*%2Fgi%2C%20m%20%3D%20r.exec(window.location.href)%3B%20if%20(m%5B1%5D)%20%7B%20window.open(%22http%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F%22%2Bm%5B1%5D)%3B%20%7D%20else%20if%20(m%5B2%5D)%20%7B%20window.open(%22http%3A%2F%2Fwww.youtube.com%2Fwatch_popup%2F%3Fv%3D%22%2Bm%5B2%5D%2C%20%22_blank%22%2C%20%22height%3D345%2Cwidth%3D560%22)%3B%20%7D%7D)()" add_date="1470231814">PopUp Video</a>
                </dt><dt><a href="javascript:(function()%7Bvar%20s,F,j,f,i;%20s%20=%20%22%22;%20F%20=%20document.forms;%20for(j=0;%20j<F.length;%20++j)%20%7B%20f%20=%20F%5Bj%5D;%20for%20(i=0;%20i<f.length;%20++i)%20%7B%20if%20(f%5Bi%5D.type.toLowerCase()%20==%20%22password%22)%20s%20+=%20f%5Bi%5D.value%20+%20%22n%22;%20%7D%20%7D%20if%20(s)%20alert(%22Passwords%20in%20forms%20on%20this%20page:nn%22%20+%20s);%20else%20alert(%22There%20are%20no%20passwords%20in%20forms%20on%20this%20page.%22);%7D)();" add_date="1470232681">Show Password</a>
                </dt><dt><a href='javascript:   url = document.location.hostname;thisvalue = url.split(".").slice(-2).join(".");                   var linkval = "@@||"+ thisvalue +"/$document"; { prompt("Copy the link Below:",linkval);}linkval=null;;' add_date="1461250448">Whitelist Bookmarklet v2</a></dt></dl></dt></dl>

<br>

            
          
!
            
              * {
  font-family: arial;
  background-color: black;
  color: white;
}

a {
  margin: 5px;
  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
  background: -moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background: -webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background: -o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
  background: linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf', GradientType=0);
  background-color: #ededed;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  cursor: pointer;
  color: #272822;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #ffffff;
}

a:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
  background: -moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background: -webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background: -o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
  background: linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed', GradientType=0);
  background-color: #dfdfdf;
}

a:active {
  position: relative;
  top: 1px;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console