AddThis | Debugging CSS & JavaScript

<!DOCTYPE html> <html> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://support.addthis.com/customer/portal/articles/1296781-debugging-css-javascript","20140702135609","https://web.archive.org/","web","/_static/", "1404309369"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8; IE=9"/> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"beacon-1.newrelic.com","errorBeacon":"bam.nr-data.net","licenseKey":"bceadb921a","applicationID":"473944","transactionName":"JlpeF0ENCggEExtXTRZBXw5WEEkUDhNAVVRKXlI8UhASDQINUUcXFl1fFA==","queueTime":3,"applicationTime":141,"ttGuid":"","agentToken":null,"agent":"js-agent.newrelic.com/nr-411.min.js"}</script> <script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={xpid:"VQcFVlRADAQDXVVW"};window.NREUM||(NREUM={}),__nr_require=function(t,e,n){function r(n){if(!e[n]){var o=e[n]={exports:{}};t[n][0].call(o.exports,function(e){var o=t[n][1][e];return r(o?o:e)},o,o.exports)}return e[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(t,e){function n(t,e,n){n||(n={});for(var r=o[t],a=r&&r.length||0,s=n[i]||(n[i]={}),u=0;a>u;u++)r[u].apply(s,e);return s}function r(t,e){var n=o[t]||(o[t]=[]);n.push(e)}var o={},i="nr@context";e.exports={on:r,emit:n}},{}],2:[function(t){function e(t,e,n,i,s){return u?u-=1:r("err",[s||new UncaughtException(t,e,n)]),"function"==typeof a?a.apply(this,o(arguments)):!1}function UncaughtException(t,e,n){this.message=t||"Uncaught error with no additional information",this.sourceURL=e,this.line=n}function n(t){r("err",[t,(new Date).getTime()])}var r=t("handle"),o=t(6),i=t(5),a=window.onerror,s=!1,u=0;t("loader").features.push("err"),window.onerror=e,NREUM.noticeError=n;try{throw new Error}catch(d){"stack"in d&&(t(1),t(2),"addEventListener"in window&&t(3),window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&t(4),s=!0)}i.on("fn-start",function(){s&&(u+=1)}),i.on("fn-err",function(t,e,r){s&&(this.thrown=!0,n(r))}),i.on("fn-end",function(){s&&!this.thrown&&u>0&&(u-=1)}),i.on("internal-error",function(t){r("ierr",[t,(new Date).getTime(),!0])})},{1:5,2:4,3:3,4:6,5:1,6:14,handle:"D5DuLP",loader:"G9z0Bl"}],3:[function(t){function e(t){r.inPlace(t,["addEventListener","removeEventListener"],"-",n)}function n(t){return t[1]}var r=t(1),o=(t(3),t(2));if(e(window),"getPrototypeOf"in Object){for(var i=document;i&&!i.hasOwnProperty("addEventListener");)i=Object.getPrototypeOf(i);i&&e(i);for(var a=XMLHttpRequest.prototype;a&&!a.hasOwnProperty("addEventListener");)a=Object.getPrototypeOf(a);a&&e(a)}else XMLHttpRequest.prototype.hasOwnProperty("addEventListener")&&e(XMLHttpRequest.prototype);o.on("addEventListener-start",function(t){if(t[1]){var e=t[1];"function"==typeof e?this.wrapped=e["nr@wrapped"]?t[1]=e["nr@wrapped"]:e["nr@wrapped"]=t[1]=r(e,"fn-"):"function"==typeof e.handleEvent&&r.inPlace(e,["handleEvent"],"fn-")}}),o.on("removeEventListener-start",function(t){var e=this.wrapped;e&&(t[1]=e)})},{1:15,2:1,3:14}],4:[function(t){var e=(t(3),t(1)),n=t(2);e.inPlace(window,["requestAnimationFrame","mozRequestAnimationFrame","webkitRequestAnimationFrame","msRequestAnimationFrame"],"raf-"),n.on("raf-start",function(t){t[0]=e(t[0],"fn-")})},{1:15,2:1,3:14}],5:[function(t){function e(t){var e=t[0];"string"==typeof e&&(e=new Function(e)),t[0]=n(e,"fn-")}var n=(t(3),t(1)),r=t(2);n.inPlace(window,["setTimeout","setInterval","setImmediate"],"setTimer-"),r.on("setTimer-start",e)},{1:15,2:1,3:14}],6:[function(t){function e(){o.inPlace(this,s,"fn-")}function n(t,e){o.inPlace(e,["onreadystatechange"],"fn-")}function r(t,e){return e}var o=t(1),i=t(2),a=window.XMLHttpRequest,s=["onload","onerror","onabort","onloadstart","onloadend","onprogress","ontimeout"];window.XMLHttpRequest=function(t){var n=new a(t);try{i.emit("new-xhr",[],n),o.inPlace(n,["addEventListener","removeEventListener"],"-",function(t,e){return e}),n.addEventListener("readystatechange",e,!1)}catch(r){try{i.emit("internal-error",r)}catch(s){}}return n},window.XMLHttpRequest.prototype=a.prototype,o.inPlace(XMLHttpRequest.prototype,["open","send"],"-xhr-",r),i.on("send-xhr-start",n),i.on("open-xhr-start",n)},{1:15,2:1}],7:[function(t){function e(){function e(t){if("string"==typeof t&&t.length)return t.length;if("object"!=typeof t)return void 0;if("undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer&&t.byteLength)return t.byteLength;if("undefined"!=typeof Blob&&t instanceof Blob&&t.size)return t.size;if("undefined"!=typeof FormData&&t instanceof FormData)return void 0;try{return JSON.stringify(t).length}catch(e){return void 0}}function n(t){var n=this.params,r=this.metrics;if(!this.ended){this.ended=!0;for(var i=0;u>i;i++)t.removeEventListener(s[i],this.listener,!1);if(!n.aborted){if(r.duration=(new Date).getTime()-this.startTime,4===t.readyState){n.status=t.status;var a=t.responseType,d="arraybuffer"===a||"blob"===a||"json"===a?t.response:t.responseText,f=e(d);if(f&&(r.rxSize=f),this.sameOrigin){var c=t.getResponseHeader("X-NewRelic-App-Data");c&&(n.cat=c.split(", ").pop())}}else n.status=0;r.cbTime=this.cbTime,o("xhr",[n,r])}}}function r(t,e){var n=i(e),r=t.params;r.host=n.hostname+":"+n.port,r.pathname=n.pathname,t.sameOrigin=n.sameOrigin}t("loader").features.push("xhr");var o=t("handle"),i=t(1),a=t(5),s=["load","error","abort","timeout"],u=s.length,d=t(2);t(3),t(4),a.on("new-xhr",function(){this.totalCbs=0,this.called=0,this.cbTime=0,this.end=n,this.ended=!1,this.xhrGuids={}}),a.on("open-xhr-start",function(t){this.params={method:t[0]},r(this,t[1]),this.metrics={}}),a.on("open-xhr-end",function(t,e){"loader_config"in NREUM&&"xpid"in NREUM.loader_config&&this.sameOrigin&&e.setRequestHeader("X-NewRelic-ID",NREUM.loader_config.xpid)}),a.on("send-xhr-start",function(t,n){var r=this.metrics,o=t[0],i=this;if(r&&o){var d=e(o);d&&(r.txSize=d)}this.startTime=(new Date).getTime(),this.listener=function(t){try{"abort"===t.type&&(i.params.aborted=!0),("load"!==t.type||i.called===i.totalCbs&&(i.onloadCalled||"function"!=typeof n.onload))&&i.end(n)}catch(e){try{a.emit("internal-error",e)}catch(r){}}};for(var f=0;u>f;f++)n.addEventListener(s[f],this.listener,!1)}),a.on("xhr-cb-time",function(t,e,n){this.cbTime+=t,e?this.onloadCalled=!0:this.called+=1,this.called!==this.totalCbs||!this.onloadCalled&&"function"==typeof n.onload||this.end(n)}),a.on("xhr-load-added",function(t,e){var n=""+d(t)+!!e;this.xhrGuids&&!this.xhrGuids[n]&&(this.xhrGuids[n]=!0,this.totalCbs+=1)}),a.on("xhr-load-removed",function(t,e){var n=""+d(t)+!!e;this.xhrGuids&&this.xhrGuids[n]&&(delete this.xhrGuids[n],this.totalCbs-=1)}),a.on("addEventListener-end",function(t,e){e instanceof XMLHttpRequest&&"load"===t[0]&&a.emit("xhr-load-added",[t[1],t[2]],e)}),a.on("removeEventListener-end",function(t,e){e instanceof XMLHttpRequest&&"load"===t[0]&&a.emit("xhr-load-removed",[t[1],t[2]],e)}),a.on("fn-start",function(t,e,n){e instanceof XMLHttpRequest&&("onload"===n&&(this.onload=!0),("load"===(t[0]&&t[0].type)||this.onload)&&(this.xhrCbStart=(new Date).getTime()))}),a.on("fn-end",function(t,e){this.xhrCbStart&&a.emit("xhr-cb-time",[(new Date).getTime()-this.xhrCbStart,this.onload,e],e)})}window.XMLHttpRequest&&XMLHttpRequest.prototype&&XMLHttpRequest.prototype.addEventListener&&!/CriOS/.test(navigator.userAgent)&&e()},{1:8,2:11,3:3,4:6,5:1,handle:"D5DuLP",loader:"G9z0Bl"}],8:[function(t,e){e.exports=function(t){var e=document.createElement("a"),n=window.location,r={};e.href=t,r.port=e.port;var o=e.href.split("://");return!r.port&&o[1]&&(r.port=o[1].split("/")[0].split(":")[1]),r.port&&"0"!==r.port||(r.port="https"===o[0]?"443":"80"),r.hostname=e.hostname||n.hostname,r.pathname=e.pathname,"/"!==r.pathname.charAt(0)&&(r.pathname="/"+r.pathname),r.sameOrigin=!e.hostname||e.hostname===document.domain&&e.port===n.port&&e.protocol===n.protocol,r}},{}],handle:[function(t,e){e.exports=t("D5DuLP")},{}],D5DuLP:[function(t,e){function n(t,e){var n=r[t];return n?n.apply(this,e):(o[t]||(o[t]=[]),void o[t].push(e))}var r={},o={};e.exports=n,n.queues=o,n.handlers=r},{}],11:[function(t,e){function n(t){if(!t||"object"!=typeof t&&"function"!=typeof t)return-1;if(t===window)return 0;if(o.call(t,"__nr"))return t.__nr;try{return Object.defineProperty(t,"__nr",{value:r,writable:!0,enumerable:!1}),r}catch(e){return t.__nr=r,r}finally{r+=1}}var r=1,o=Object.prototype.hasOwnProperty;e.exports=n},{}],loader:[function(t,e){e.exports=t("G9z0Bl")},{}],G9z0Bl:[function(t,e){function n(){var t=p.info=NREUM.info;if(t&&t.agent&&t.licenseKey&&t.applicationID&&u&&u.body){p.proto="https"===c.split(":")[0]||t.sslForHttp?"https://":"http://",a("mark",["onload",i()]);var e=u.createElement("script");e.src=p.proto+t.agent,u.body.appendChild(e)}}function r(){"complete"===u.readyState&&o()}function o(){a("mark",["domContent",i()])}function i(){return(new Date).getTime()}var a=t("handle"),s=window,u=s.document,d="addEventListener",f="attachEvent",c=(""+location).split("?")[0],p=e.exports={offset:i(),origin:c,features:[]};u[d]?(u[d]("DOMContentLoaded",o,!1),s[d]("load",n,!1)):(u[f]("onreadystatechange",r),s[f]("onload",n)),a("mark",["firstbyte",i()])},{handle:"D5DuLP"}],14:[function(t,e){function n(t,e,n){e||(e=0),"undefined"==typeof n&&(n=t?t.length:0);for(var r=-1,o=n-e||0,i=Array(0>o?0:o);++r<o;)i[r]=t[e+r];return i}e.exports=n},{}],15:[function(t,e){function n(t,e,r,s){function nrWrapper(){try{var n,a=u(arguments),d=this,f=r&&r(a,d)||{}}catch(c){i([c,"",[a,d,s],f])}o(e+"start",[a,d,s],f);try{return n=t.apply(d,a)}catch(p){throw o(e+"err",[a,d,p],f),p}finally{o(e+"end",[a,d,n],f)}}return a(t)?t:(e||(e=""),nrWrapper[n.flag]=!0,nrWrapper)}function r(t,e,r,o){r||(r="");var i,s,u,d="-"===r.charAt(0);for(u=0;u<e.length;u++)s=e[u],i=t[s],a(i)||(t[s]=n(i,d?s+r:r,o,s,t))}function o(t,e,n){try{s.emit(t,e,n)}catch(r){i([r,t,e,n])}}function i(t){try{s.emit("internal-error",t)}catch(e){}}function a(t){return!(t&&"function"==typeof t&&t.apply&&!t[n.flag])}var s=t(1),u=t(2);e.exports=n,n.inPlace=r,n.flag="nr@wrapper"},{1:1,2:14}]},{},["G9z0Bl",2,7]);</script> <link href="https://web.archive.org/web/20140702135609cs_/http://assets03.desk.com/assets/portal_jqueryui_only-0b9cff0a93f6e674c863d5ae4e4ec6fd.css" media="screen" rel="stylesheet" type="text/css"/> <script src="https://web.archive.org/web/20140702135609js_/http://assets04.desk.com/assets/vendor-25eb61af4992cf238353ac316557ef65.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://assets02.desk.com/assets/customer_widget-baa68b3634ef5acd73315f57af8fa3b9.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://assets04.desk.com/assets/portal-33005ec4cf86e817fbe0e83e4327a70c.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://www.google.com/jsapi?key=ABQIAAAAQO2RPu5r12mVC40HMDIFHRQqrBpdv_jP_dFl8Cw_MxS37sDB3xTXnsXso23z1ROPVCqEVVv6cqz_cA" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://assets03.desk.com/assets/tracking-ba91ec11c4fdd4fab9e4a3d5d675422d.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://deskwww.s3.amazonaws.com/new/javascripts/deskanalytics.js" type="text/javascript"></script> <script src="https://web.archive.org/web/20140702135609js_/http://assets02.desk.com/assets/tracking/settings/production-6a6b78030e48bdca0ea4d2891776259c.js" type="text/javascript"></script> <meta content="authenticity_token" name="csrf-param"/> <meta content="IhZyJLC2V3fKS2b90kAfBLK96U9wMr1YDuO+uqQLHxM=" name="csrf-token"/> <link rel="SHORTCUT ICON" type="image/ico" href="https://web.archive.org/web/20140702135609im_/http://www.addthis.com/favicon.ico"/> <link rel="icon" type="image/png" href="https://web.archive.org/web/20140702135609im_/http://www.addthis.com/favicon.ico"/> <link rel="dns-prefetch" href="//web.archive.org/web/20140702135609/http://fonts.googleapis.com/"> <link href="//web.archive.org/web/20140702135609cs_/http://fonts.googleapis.com/css?family=Lato:300,700" rel="stylesheet" type="text/css"> <title> AddThis | Debugging CSS & JavaScript </title> <meta property="og:title" content="Debugging CSS & JavaScript"/> <meta property="og:type" content="article"/> <meta property="og:site_name" content="AddThis"/> <meta property="og:description" content="Many support requests involve AddThis styles or scripts that are conflicting with the AddThis code. Debugging these sort..."/> <style type="text/css"> /* Reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: inherit; vertical-align: baseline; outline: none; } html { font-size: 13px; height: 100%; } body { margin: 0; padding: 0; border: 0; font-family: 'Helvetica Neue', 'Helvetica', sans-serif; background: #F8F8F8; } h1, h2, h3, h4, h5, h6, p, address { color: #272727;} h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 14px; color: #414141; } a img { border: 0; } p { line-height: 18px; color: #535353; margin: 0 0 20px; } a { color: #254689; text-decoration: none; } a:link { color: #254689; } a:visited { color: #254689; } a:hover, a:focus { color: #254689; text-decoration: underline; } a:active { color: #254689; } html,body { height: 100%; } body { position: relative; background: #ecebe8; margin: 0; padding: 0; font-family: "lato","helvetica neue",helvetica,arial,sans-serif; font-size: 16px; font-weight: 300; color: #66625b; } a:link, a:visited { text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; color: #f8694d; } a:hover { text-decoration: underline; color: #d7492e; } /* a[href*="//"]:not([href*="addthis.com"]) { */ a[href ^= "http"]:hover { text-decoration: none; border-bottom: 1px dotted #d7492e; } *, *:after, *::before { -moz-box-sizing: border-box; box-sizing: border-box; } /* CSS Animation ---------------------------------------------------------- */ @-webkit-keyframes fadein { 0%{ -webkit-transform: translateY(-20px); transform: translateY(-20px); -webkit-transform: scale(.85); transform: scale(.85); opacity: 0; } 100%{ -webkit-transform: translateY(0); transform: translateY(0); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-moz-keyframes fadein { 0%{ -moz-transform: translateY(-20px); transform: translateY(-20px); -moz-transform: scale(.85); transform: scale(.85); opacity: 0; } 100%{ -moz-transform: translateY(0); transform: translateY(0); -moz-transform: scale(1); transform: scale(1); opacity: 1; } } @-o-keyframes fadein { 0%{ -o-transform: translateY(-20px); transform: translateY(-20px); -o-transform: scale(.85); transform: scale(.85); opacity: 0; } 100%{ -o-transform: translateY(0); transform: translateY(0); -o-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes fadein { 0%{ transform: translateY(-20px); transform: scale(.85); opacity: 0; } 100%{ transform: translateY(0); transform: scale(1); opacity: 1; } } /* HEADER ---------------------------------------------------------- */ body > header { position: relative; background-image: url('https://web.archive.org/web/20140702135609im_/http://cache.addthiscdn.com/site/img/header-help.jpg'); background-color: #363432; background-repeat: no-repeat; background-position: 50% 90%; background-size: cover; height: 30%; min-height: 360px; overflow: hidden; } body > header:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAGUlEQVQoz2NgOMPQQBQGIuLgqImjJg5rEwEAMuWxCNqASgAAAABJRU5ErkJggg=='); } body > header .addthis-logo { position: absolute; top: 30px; left: 5%; display: block; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAAaCAYAAABLupXyAAAFJElEQVR4Ae3bfWhVdRzH8e91LrMH5ya5aZaLyEqjGpVPMLXM0IiyBynDzLJFZIVBkqJGDyZOzeZDbKQ0I6sRGItlWppcMigCc3/YkzVbaQ+ibm5O3b1u9/T+4/7gy4/uufec3bmzu73htX/uX+ecz7jzh0dInFnF+ViEsjRbjhshPVMv4UcuDsHpJFEUQ3qm3oHNhdPJPoD44jjZ2IGwMhWSRhchrDwA8WkZwnGbIDZsQriDlkHiFiIcVwXxoaAz7rHwEOfD6WTVHRjYfbDbAUmjgdDNh/hUDVMtxIZadLRqSNxmmOohPhRCN6enDOxT2MVwWaYNrHdgc6c4zpPT4qZ2/sAcZyja8X8t7cYDW4CyBHTNKEtgbpoHlocyZfS5H9jePQ4RnWo5FwNbBFMTPobpIELdcGDuyOtY/A/MXWYPjPHgV5g24y7oboN4cAWKUYQBHRhYDm7BOAwP8MBCGIFJKEJ/SBpk4UoUx41AVncb2ATo7kA2GmB6H5JEHzyNOujOYhcmehhYEbahDbo6vIjsAA2sBL9DF8UWFEAsQ1Gr3A2xjMJ7OAG7JmxCYXcZ2Lsw/YssCCpgasVASALn4RO4FcOCFAY2AxG4tRvbAzCw9XDrD+R7/CP/YUSQrEaMD/bA+PrCKZjWQeImQTcPksBae0zYgVJUoB4OtScZWBEi0NWhAiuxG6ZYVw5MXUsbalCKzWiBrtzDwAbjDExRVKMUG7AfusPo7z6wn/ZZcLJJXUa7/Tmw+PF0DKwEurHWV95fMO2F2HCV9bCPYwxE6Yt1INeB7YZuFbIg1vCbQF0zMFUDRtv3AydhOuZhYLOhuxWihPAmdI+4Dsx3rz+XjoF9C1MdxPIGdDdALKXQzYDYEMIel4EVejjkfTQgA3sMYsNG6HJTHNh86K5O4ZjjnmAOzHFGQvcaxHIzdOshlr0ejjTudxlYCXRTIAn0xZEuHlgUF0BseBa6whQHdid0dZiFAf6PKY7+Y0GkVf2lEbM/B15+qqMDWw3dNRAbDsDUgH4Q5TRMlRAXg1wGtgKmszgf4mJrFw/sECSBOT4Hlo0fYNeG71GOmRgU7GMKLgRHYIqhNoFG6B6y/vWoewmSRGuCgVXCdBiSxPqAHrT6HxhwOb6GW+2owcigDuxe+G0nJC4E3WJIEpEEA9vo8YG/lZEDA0KYjHL8jESdxrggDqwGfotZp+pHYaqAuLg0xa/IKLIhLrZn8MBsuZiGNfgbun3BGpjjDEEbTF9iYBJLoHsFErcTpt8QgiTwhMvAHoRuMiSBC9GSgQObiOlx412u/SvoLg7SwBb6+A0ahph1Qt0HghegmwmxoT9+cRnYJYjCtMtlrItBGTewz2D6U91j2zPQ5Xkb2MLZDscQwKvz0jcwHhgOwHQGOZAUhBMcIwxGC0zN6jMjBzUpHLRuga4c/eyHh/YMHdgS6JbZI0MOvoHpUHD+w6HjFEP3ESRFJdBV2b9RVt/hHWxFM0ytLgMrQCN0R1CFSvwIUyQDB5aP49AdRBXexjY0Q/d8kAZWCd10SIpyrYcaQR4kbiWStRz19sAsY3AMbh3AuowbGDARjUilNQghAC99OE4WtiEc9zn6QTxYjbAyDaLcji8QhW4/ZkNQlcJLH/lYi6PQncAG5GGO/dKHR2EPL3B4feljKsJKgceXPvKxCvWwa8CHGGsftObhMJxOchYTIF2O4WI4RiEP4lMIg3EdhiEL0sMMwrW4Xg/VJvwQbv4QLEVZmq3ATZCeqdd/xsq7rw23FFcAAAAASUVORK5CYII='); background-image: none, url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE1MnB4IiBoZWlnaHQ9IjI2cHgiIHZpZXdCb3g9IjAgMCAxNTIgMjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1MiAyNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGNUMzRSIgZD0iTTI1LjM5NyAyMi44NzJjMCAxLjQwMy0xLjEzOCAyLjU0LTIuNTQgMi41NEgyLjU0MUMxLjEzOCAyNS40IDAgMjQuMyAwIDIyLjg3MlYyLjU1NSBjMC0xLjQwMiAxLjEzOC0yLjU0IDIuNTQxLTIuNTRoMjAuMzE2YzEuNDAyIDAgMi41IDEuMSAyLjUgMi41NFYyMi44NzJ6Ii8+PHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIxOS45LDExIDE0LjUsMTEgMTQuNSw1LjYgMTAuOSw1LjYgMTAuOSwxMSA1LjUsMTEgNS41LDE0LjYgMTAuOSwxNC42IDEwLjksMjAgMTQuNSwyMCAxNC41LDE0LjYgMTkuOSwxNC42Ii8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE0Ni44MyAxNC4yOThjLTAuODItMC4xODctMS42NDQtMC4zMzgtMi4zNzktMC41MTVjLTEuNTU4LTAuMzcyLTIuNzM3LTAuODU3LTIuNzM3LTIuMDE0IGMwLTEuMzcgMS44NTctMS42MTQgMi44NjEtMS42MTRjMS41MjIgMCAyLjkgMC41IDMuMiAyLjEwMWgzLjYyM2MtMC40MjgtMy41MDEtMy4zNTItNC44NDItNi41OC00Ljg0MiBjLTIuODYxIDAtNi41NzggMS4wNjYtNi41NzggNC41MDhjMCAxIDAuMyAxLjggMC43IDIuNDY5YzAuOTI0IDEuMyAyLjYgMS44IDQuMyAyLjIgYzIuNTI5IDAuNiA1LjEgMC44IDUuMSAyLjYyYzAuMDkxIDEuNzk2LTIuMTk0IDIuMDY5LTMuNTAzIDIuMDY5Yy0xLjg1NyAwLTMuMzgyLTAuNzMtMy41NjMtMi43NGgtMy40NzMgYzAuMDYxIDMuNyAzIDUuNSA3IDUuNDgyYzMuMjU5IDAgNy4wMzYtMS4zNyA3LjAzNi01LjExN0MxNTEuOTE4IDE1LjggMTQ5LjQgMTQuOSAxNDYuOCAxNC4zIi8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQ0Ljc5NCAxLjg0aC00LjA1MWwtMy4zMDggOC42MmwtNS4wMzggMTMuMTI3aDMuOTI5bDIuMDQyLTUuNzU2aDguNjhsMi4wNDEgNS43NTZoNC4wODFsLTQuMjc4LTExLjEwNyBMNDQuNzk0IDEuODR6IE0zOS40MDIgMTQuOTM4bDEuMzUtMy44MzdsMS45MzktNS41MTRoMC4wOTJsMi4xODIgNi4yNjFsMS4wNzggMy4wODlIMzkuNDAyeiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NS44MSA5Ljg4MWgtMC4wNmMtMS4wNjctMS43MzYtMy4yNTktMi40NjgtNS4yNC0yLjQ2OGMtMi45MSAwLTUuNzY5IDEuNzk1LTYuNTg0IDUuOCBjLTAuMTQ5IDAuNzI5LTAuMjM4IDEuNTI0LTAuMjM4IDIuNDAzYzAgNC43IDIuNCA4LjQgNy40IDguNDA2YzEuOTgxIDAgMy45Ni0wLjc2MiA0Ljg3NC0yLjU2aDAuMDYydjIuMTMzaDMuMjg5di04LjY5NCBWMS44NEg2NS44MVY5Ljg4MXogTTY1LjkzMiAxNS42OThjMCAyLjc0Mi0xLjMxIDUuNTczLTQuNDE3IDUuNTczYy0zLjAxNSAwLTQuMzU0LTIuNjc5LTQuMzU0LTUuMzkxIGMwLTAuNzU3IDAuMDg1LTEuNTE2IDAuMjY5LTIuMjI1YzAuNTAzLTEuOTQ0IDEuNzU5LTMuNTAxIDQuMTQ3LTMuNTAxYzIuMzc5IDAgNCAxLjYgNC4zIDQuNCBDNjUuOTA4IDE0LjkgNjUuOSAxNS4zIDY1LjkgMTUuNyIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04NC40MiA5Ljg4MWgtMC4wNjFjLTEuMDY2LTEuNzM2LTMuMjU5LTIuNDY3LTUuMjM4LTIuNDY3Yy0zLjM0NSAwLTYuNjIxIDIuMzY2LTYuODA2IDcuNyBjLTAuMDA1IDAuMTU2LTAuMDE3IDAuMzA3LTAuMDE3IDAuNDY5YzAgNC43IDIuNCA4LjQgNy40IDguNDA2YzEuOTc5IDAgMy45NTgtMC43NjIgNC44NzMtMi41NmgwLjA2MXYyLjEzM2gzLjI5di03LjU4IFYxLjg0SDg0LjQyVjkuODgxeiBNODQuNTM3IDE1Ljg3OGMtMC4wNTYgMi42ODQtMS4zNzEgNS4zOTQtNC40MSA1LjM5NGMtMy4wMTcgMC00LjM1Ni0yLjY3OS00LjM1Ni01LjM5MSBjMC0wLjE2MyAwLjAwNC0wLjMyNyAwLjAxMi0wLjQ4OWMwLjEyOS0yLjY2OCAxLjMzMy01LjIzNiA0LjQwNi01LjIzNmMyLjY4IDAgNC40IDIuMSA0LjQgNS41IEM4NC41NDMgMTUuOCA4NC41IDE1LjggODQuNSAxNS45Ii8+PHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSI5My40LDUuMSAxMDAuMyw1LjEgMTAwLjMsMTYuMiAxMDAuMywyMy42IDEwNC4xLDIzLjYgMTA0LjEsMTYuMiAxMDQuMSw1LjEgMTExLDUuMSAxMTEsMS44IDkzLjQsMS44Ii8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyMi4wNTQgNy40MTRjLTIuMDcgMC0zLjg2NyAxLjA2Ni00LjcyMSAyLjQ5N2gtMC4wNjFWMS44NEgxMTMuOHYxNC4yMDZ2Ny41NDFoMy40NzN2LTcuNjY1di0xLjYyNCBjMC0yLjMxNSAxLjQ5Mi00LjE0MyAzLjgwOC00LjE0M2MyLjA0MSAwIDMgMS4xIDMuMSAzLjUzM3YxLjg5MnY4LjAwN2gzLjQ3M3YtOC4yM3YtMi41ODIgQzEyNy42MjggOS4yIDEyNS41IDcuNCAxMjIuMSA3LjQiLz48cmVjdCB4PSIxMzEuNSIgeT0iMS44IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iMy41IiBoZWlnaHQ9IjMuMyIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTMxLjUsMTUuMSAxMzEuNSwyMy42IDEzNSwyMy42IDEzNSwxNC44IDEzNSw3LjggMTMxLjUsNy44Ii8+PC9zdmc+'); background-repeat: no-repeat; width: 152px; height: 26px; line-height: 26px; padding: 0; text-indent: -9999em; overflow: hidden; float: left; zoom: 1; z-index: 2; opacity: 1; } body > header .addthis-logo:hover { opacity: .75; } body > header .container { position: relative; max-width: 1280px; margin: 0 auto; font-family: "Lato","Open Sans Light","helvetica neue",helvetica,arial,sans-serif; font-weight: 300; font-size: 3.2em; color: #fff; z-index: 1; } body > header .page-title { padding: 100px 0 40px 0; text-align: center; color: #fff; } body > header h1 { margin: 0 0 30px; padding: 0; text-shadow: 0 1px rgba(0,0,0,.5); line-height: 1; font-size: 3.2em; font-weight: 700; color: #fff; opacity: 0; opacity: 1\9; -webkit-animation: fadein .6s .5s 1 forwards ease-in; -moz-animation: fadein .6s .5s 1 forwards ease-in; -ms-animation: fadein .6s .5s 1 forwards ease-in; -o-animation: fadein .6s .5s 1 forwards ease-in; animation: fadein .6s .5s 1 forwards ease-in; cursor: default; } body > header h1 a:link, body > header h1 a:visited, body > header h1 a:hover { display: block; border: none !important; text-decoration: none !important; font-weight: 700 !important; color: #fff !important; } /* HEADER SEARCH ---------------------------------------------------------- */ body > header .header-right { position: relative; top: 25px; right: 5%; float: right; z-index: 2; } body > header .header-right a { display: inline-block; text-decoration: none; text-transform: uppercase; margin: 8px 0 0 20px; outline: none; font-size: 14px; color: #fff; float: left; opacity: 1; } body > header .header-right a:hover { text-decoration: none; opacity: .5; } body > header .support-search-big { background: none !important; } body > header #support-search { position: relative; display: inline-block; margin-left: 20px; } body > header #support-search #q { background: #fff; border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; width: 160px; height: 32px; line-height: 32px; font-weight: 300; font-size: 16px; padding-left: 25px; margin-bottom: 5px; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; color: #444; } body > header #support-search #q:focus { width: 280px; } body > header #support-search-submit { position: absolute; top: 10px; left: 10px; right: auto; background: url('https://web.archive.org/web/20140702135609im_/http://assets3.desk.com/images/portal/search.gif') no-repeat; border: 0; width: 13px; height: 18px; padding: 0; margin: 0; overflow: hidden; text-indent: 900px; cursor: pointer; } body > header .question-small { padding: 2px 8px; font-size: 12px; font-weight: 300; color: #999; color: rgba(255,255,255,.5); cursor: default; } /* FOOTER ---------------------------------------------------------- */ body > footer { background: #363432; margin-bottom: -1px; padding: 1.5em 0 2em 0; color: #ccc; color: rgba(255,255,255,.5); } body > footer p { margin: 0; padding: 0 200px 2px 0; font-family: "lato","helvetica neue",helvetica,arial,sans-serif !important; font-weight: 300 !important; font-size: 14px !important; color: #fff !important; color: rgba(255,255,255,.5) !important; } body > footer p a:link, body > footer p a:visited { color: #fff; color: rgba(255,255,255,.75); } body > footer .btn-getstarted { position: absolute; top: 0; right: 15px; display: inline-block; background: #fff; border-radius: 16px; height: 33px; line-height: 33px; padding: 0 16px; margin: 5px 10px 0 0; text-transform: uppercase; font-weight: 600; color: #333; float: right; } body > footer .btn-getstarted:hover { background: #FE6D4C; text-decoration: none; color: #fff; } /* MAIN CONTENT ---------------------------------------------------------- */ #company-support-portal { background-color: #ecebe8; background: -webkit-radial-gradient(circle,#f9f9f9,#e2e0dc); background: -moz-radial-gradient(circle,#f9f9f9,#e2e0dc); background: -ms-radial-gradient(circle,#f9f9f9,#e2e0dc); margin: 0; padding: 10px 0 0; line-height: 1.5em; } .wrapper { position: relative; max-width: 1280px; width: 90%; margin-right: auto; margin-left: auto; padding: 50px 15px; line-height: 1.5em; } .container-fluid { position: relative; max-width: 1280px; width: 90%; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .content-title { padding: 60px 0; text-align: center; } .content-title:first-of-type { padding-top: 0; } .content-title h2, .content-title h3 { margin: 0; padding: 0; font-size: 3em; line-height: 1em; cursor: default; } .topic-block, .topic-block-narrow { width: 33%; padding: 0 20px 40px; float: left; } .topic-block h4, .topic-block-narrow h4 { margin-bottom: 10px; } #support-main, #support-main-index { padding: 0 85px 50px 15px; min-height: 250px; margin: 0 auto; line-height: 1.8em; } #support-main { width: 80%; } #support-main.support-main { float: left; } #support-main h3 { margin: 20px 0; padding: 0; line-height: 1em; font-size: 3em; } #support-main .content { font-size: 1.2em; line-height: 1.5em; } #support-main .article-content { min-height: 380px; } #support-main .article-content h2 { margin: 2em 0 !important; font-size: 2em; } #support-main .article-content h3 { margin: 2em 0 1em 0 !important; font-size: 1.5em; } #support-main .article-content h2:first-of-type, #support-main .article-content h3:first-of-type { margin-top: 0 !important; } #support-main .title h3 { margin: 0 0 20px 0 !important; } #support-main .meta { margin: 4em 0; font-size: .8em; } #support-main .meta .name.agent { background: #f8694d; } #support-main .meta span { display: inline-block; margin-right: 1em; cursor: default; } #support-main .title .addthis_toolbox { height: 32px; margin-bottom: 2em; margin-top: 1em; /*position: relative; top: -50px; float: right;*/ } #support-main a.addthis_button_expanded { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: color 0 ease-in; transition: none !important; } #support-main .article-content .full-width { width: 100%; max-width: 900px; } #support-main .article-content .full-width { border: 1px solid #ccc; } #support-main pre.prettyprint { /* default skin */ background: #fff; border-color: #c7c5bf; padding: 10px; margin: 10px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -ms-word-break: break-all; word-break: break-all; word-wrap: break-word } #support-main b, #support-main strong, #support-main dt { color: #2b2b2b; } #support-main p { margin: 20px 0; padding: 0; line-height: 1.5em !important; font-weight: 300 !important; } #support-main dt { margin: 2em 0 0; font-weight: 700; } #support-main ul, #support-main ol { margin: 20px 0; } #support-main ul li, #support-main ol li { margin: 0 0 0 22px; padding: 0 0 5px 0; } #support-main h2 + ul, #support-main h3 + ul { margin: 0; } #support-main code, #support-main samp { /*font-family: Inconsolata, monospace, sans-serif;*/ font-weight: 300; color: #a0441c; } #support-main table { display: table; border-collapse: separate; width: 100%; } #support-main table thead th { border-bottom: 3px solid #a09d96; padding: 10px 0; text-align: left; color: #2b2b2b; } #support-main table tbody td { padding: 10px 0; word-break: break-all; word-break: break-word; font-size: .9em; } #support-main table tbody tr:nth-child(odd) { background: rgba(255,255,255,.4); } /* SUPPORT SIDE */ #support-side { width: 20%; padding-top: 30px; float: right; } #support-side #post-question-submit { height: 48px; line-height: 48px; min-width: 200px; margin-bottom: 2em; padding: 0; font-size: 16px; } #support-side h3 { margin-bottom: 20px !important; } #breadcrumbs { position: relative; top: -25px; } .atm-s a, #at_hover.atm-s a { font-family: helvetica,arial,sans-serif !important; } /* Top Content Search Form */ #support-search { position: relative; } #support-search-submit { position: absolute; top: 0; right: 0; background: #FE6D4C; border: none; border-radius: 0 4px 4px 0; height: 48px; line-height: 48px; padding: 0 20px; font-weight: 300; font-size: 16px; color: #fff; cursor: pointer; } #q2 { background: #fff; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; width: 99%; width: calc(100% - 90px); height: 48px; line-height: 48px; font-weight: 300; font-size: 16px; color: #444; } #question-mask2 { display: none; } /* RATE ARTICLE */ #rate_article { margin: 2em 0; } #rate_article > div { display: inline-block; } #rate_article .rate-link-down { margin-left: 2em; } #rate_article a { display: inline-block; background: #f8694d; border-radius: 3px; padding: 0 12px; margin-right: .5em; font-size: 1em; color: #fff; } #rate_article a:hover { background: #2b2b2b; border: none !important; text-decoration: none; } /* SEARCH DROPDOWN-RESULTS */ .ui-autocomplete { border-color: #a09d96; left: auto !important; right: 5%; padding: 0; } .ui-menu .ui-menu-item a { border-radius: 0; } /* .ui-menu .ui-menu-item:nth-child(odd) { background: #fbfaf6 } .ui-menu .ui-menu-item a { border-radius: 0; border: none; padding: 5px; } .ui-autocomplete a:hover, .ui-autocomplete a.ui-state-hover, li.featured a, .highlight { background: #e8f5f8 !important; border-color: #e8f5f8 !important; } */ .ui-menu-item .ui-autocomplete .article-autocomplete-subject { font-family: inherit !important; font-size: 1.1em; font-weight: 600; color: #f8694d !important; } .ui-menu-item .article-autocomplete-body { font-family: inherit !important; font-size: 1.1em; } /* SEARCH RESULTS */ #search-results { margin: 4em 0 0; } #search-results li { /* list-style: none; */ padding: 1em !important; margin: 0 !important; } #search-results li:nth-child(odd) { background: rgba(255,255,255,.4); } #search-results h4 a { font-weight: 700; } #search-results .meta { margin: 0; } #search-results .meta span { margin-right: 1em; } /* PAGINATION */ .pagination { margin: -2em 0 3em 0; } .pagination .current { display: inline-block; background: #363432; border: 1px solid ##363432; border-radius: 3px; min-width: 30px; margin: 0 5px; text-align: center; font-style: normal; color: #fff; } .pagination > a { display: inline-block; background: none; border: 1px solid rgba(255,255,255,.0); border-radius: 3px; min-width: 30px; margin: 0 5px; text-align: center; font-style: normal; } .pagination > a:hover { background: #f8694d; border-color: #f8694d; text-decoration: none; color: #fff; } .pagination .disabled { cursor: default; } /* QUESTIONS */ .question-details { margin-bottom: 4em; } .question-details h3 { margin: 0 !important; } .question-details .meta { margin: 1em 0 2em 0 !important; } .question .meta .name { display: inline-block; background: #a9d043; border-radius: 12px; margin-right: .5em; padding: 0 8px 3px 8px; line-height: 20px; font-weight: 300; color: #fff; cursor: default; } .question-ask { position: relative; padding-left: 80px; } .question .gravatar-wrapper { position: absolute; left: 0; } .question .gravatar-wrapper img { border: 1px solid #c7c5bf; border-radius: 3px; } #support-main .answer-details .meta { margin: 10px 0 0; padding-bottom: 1em; } .question .answer-details .meta .name { background: #a09d96; } .question .question-details .gravatar-wrapper { top: 0; } .question .replies { border-top: 3px solid #a09d96; padding-top: 2em; } .question .reply { position: relative; border-bottom: 1px solid #c7c5bf; padding: 40px 0 40px 80px; } .question .reply .gravatar-wrapper { top: 4px0; } .question .answer-body { padding-bottom: 2em; } .question .answer-rating { text-align: right; font-size: .8em; } .question .answer-rating > div { display: inline-block; margin-left: 1.5em; } .question .answer-rating > div span { cursor: default; } .question .answer-rating a:link, .question .answer-rating a:visited { display: inline-block; background: transparent; border: 1px solid #c7c5bf; border-radius: 3px; padding: 0 12px; margin-right: .5em; font-size: 1em; color: #66625b; } .question .answer-rating a:hover { background: #2b2b2b; border-color: #2b2b2b !important; text-decoration: none; color: #fff; } .question .agent-answer-label { color: #000; } .question .best-answer-green { position: absolute; top: 10px; right: 10px; background: #a9d043; border-radius: 16px; padding: 0 12px; font-size: 14px; color: #fff; cursor: default; } .question .best-answer-green a { display: block; color: #fff; cursor: pointer; } #question-best-answer { background: rgba(255,255,255,.6); } #question-best-answer .reply { border-bottom: none; } #support-main .form-notice { margin-bottom: 4em; } /* SUBMIT QUESTION */ #form { margin: 20px 0 50px 0; } #form .input-button { margin-top: -125px; float: right; } #form .input-button input[type="submit"] { position: relative; top: -138px; height: 120px; line-height: 120px; } .input-block { position: relative; background: #eeedea; border: 1px solid #dad7d0; border-radius: 4px; margin-bottom: 10px; padding: 20px; } .input-block.required:after { content: "required"; position: absolute; top: 10px; right: 10px; background: #ebccd1; border-radius: 12px; padding: 0 12px; line-height: 18px; text-transform: uppercase; font-size: 11px; font-weight: 300; color: #a94442; } .input-block label { display: block; font-weight: 700; color: #2b2b2b; } .input-block input[type="text"], .input-block input[type="email"], .input-block input[type="url"], .input-block textarea { background: #fff; border: 1px solid #dad7d0; border-radius: 3px; width: 100%; height: 48px; line-height: 48px; padding: 0 10px; outline: none; font-size: 24px; color: #2b2b2b; } .input-block input[type="text"]:focus, .input-block input[type="email"]:focus, .input-block input[type="url"]:focus, .input-block textarea:focus { border-color: #adaba6; } .input-block textarea { min-height: 160px; } .input-footer { position: relative; min-height: 115px; padding-top: 40px; } .input-footer input[type="submit"] { position: absolute; top: 40px; right: 0; height: 113px; line-height: 113px; } .recaptchatable { background: #fff; border: 1px solid #dad7d0 !important; } .recaptchatable a { font-size: 12px; color: #999 !important; } .recaptchatable #recaptcha_image { border: none !important; } #recaptcha_widget_div { width: 440px; margin-top: 2em; } #recaptcha_response_field { border-color: #dad7d0 !important; padding: 5px; outline: none; } #recaptcha_response_field:focus { border-color: #adaba6 !important; } .faux-file-field { padding: 10px 0; } /* TOGGLE */ #toggle .nav-tabs { height: 48px; border-bottom: 1px solid #666; margin: 1.5em 0; padding: 0 10px; } #toggle .nav-tabs a { position: relative; display: inline-block; background: none !important; border: none; height: 48px; line-height: 48px; padding: 1px 25px; } #toggle .nav-tabs a.active { background: none !important; border-left: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #666; border-bottom: 1px solid #ecebe8; border-radius: 4px 4px 0 0; padding: 0 25px; color: #000; } #toggle .nav-tabs a:hover { background: none !important; color: #2b2b2b !important; } #toggle .nav-tabs a.active:hover { color: #2b2b2b !important; } /* MY CASES */ table.mycases { width: 100%; border: 1px solid #dad7d0; border-collapse: collapse; border-spacing: 1px; } table.mycases thead th { border-bottom: 2px solid #a09d96; padding: 10px; font-weight: bold; font-size: .8em; text-align: left; color: #2b2b2b; } table.mycases tbody tr:nth-child(odd) { background-color: #fff; } table.mycases tbody tr:nth-child(even) { background-color: #f3f2ee; } table.mycases tbody td { border-bottom: 1px solid #dad7d0; padding: 8px 10px; vertical-align: top; border-collapse: collapse; -ms-word-break: break-all; word-break: break-all; word-break: break-word; line-height: 1.5em; font-size: .8em; } table.mycases tbody td td { border: none; } /* COMMON */ h1,h2,h3,h4,h5,h6 { color: #2b2b2b; cursor: default; } hr { border-top: 1px solid #c7c5bf; border-bottom: none; height: 1px; margin: 20px 0; overflow: hidden; } .pill-new { display: inline-block; background: #51c0df; border-radius: 12px; vertical-align: super; padding: 0 8px; line-height: 16px; font-weight: 300; font-size: 11px; color: #fff; cursor: default; } .bluebox { background: #d9edf7; border: 1px solid #bce8f1; border-radius: 3px; margin: 2em 0; padding: 1em; color: #31708f; } .pic-full { border: 1px solid #a09d96; width: 100%; } .view-more:link, .view-more:visited { /* color: #66625b; */ } b,strong { color: #2b2b2b; } .clear { clear: both; } .mt0 { margin-top: 0 !important; } /* MEDIA QUERIES ---------------------------------------------------------- */ @media only screen and (max-width: 479px) { body > header { min-height: 200px; } body > header h1 { font-size: 64px; } body > header .addthis-logo { width: 32px; } body > header #support-search #q:focus { widows: 240px; } body > header .question-small { display: none !important; } .content-title h2, .content-title h3 { font-size: 2em; } .topic-block, .topic-block-narrow { width: 100%; } #support-main, #support-side { width: 100%; padding: 15px; } #post-question-submit { padding: 0 32px; } body > footer .btn-getstarted { position: relative; top: 10px; right: auto; left: 0; float: none; } } </style>  <style type="text/css"> /* LINK COLOR */ a{ color: # !important; } /* BODY STYLES */ body{ font-family: Lucida Grande,Verdana,Arial,sans-serif !important; background: #F4F4F4 !important; color: #000000 !important; } .ui-autocomplete a:hover, .ui-autocomplete a.ui-state-hover, li.featured a, .highlight { background: #FFFAE1 !important; background-color: #FFFAE1 !important; } #support-main h5 a, #toggle .active { background: #E5E5E5 !important; color: #535353 !important; } #support-main .dashboard h5 a:hover, #toggle a:hover { background: #254689 !important; color: #ffffff !important; } #toggle a { background: #ffffff !important; } #form label.invalid { color: #FF0000 !important; } /* HEADER BACKGROUND COLOR */ #company-header{ background: #000000 !important; } /* TITLE BACKGROUND COLOR */ #support-header{ background: #E5E5E5 !important; } #support-header h2{ text-shadow: 0 1px 0 #ffffff !important; } #breadcrumbs{ color: #000000 !important; } /* FORM BACKGROUND COLOR */ .support-body, .question-body, #form, .pagination, .reply, .condensed{ background: #ffffff !important; } /* TEXT COLOR */ p{ font: 14pt Lucida Grande,Verdana,Arial,sans-serif !important; color: #535353 !important; } /* HEADING TEXT COLOR */ h2, h3, h4, h5{ color: #000000 !important; font-family: Lucida Grande,Verdana,Arial,sans-serif !important; } .ui-autocomplete{ background: #ffffff !important; font: 10pt Lucida Grande,Verdana,Arial,sans-serif !important; } .ui-autocomplete .article-autocomplete-subject{ color: #254689 !important; font: 10pt Lucida Grande,Verdana,Arial,sans-serif !important; } .article-autocomplete-body{ color: #666666 !important; font: 10pt Lucida Grande,Verdana,Arial,sans-serif !important; font-size: 90% !important; } .support-search-big #support-search-submit, #question_submit, #email_submit, #chat_submit, #answer_submit{ background: # url(/web/20140702135609im_/http://support.addthis.com/customer/portal/articles/1296781-debugging-css-javascript) !important; color: # !important; } .support-search-big{ background: #E5E5E5 !important; } /* Override for jquery spinner position */ .ui-autocomplete-loading { background-position: 85% !important; } </style> <style type="text/css"> /* CUSTOM CSS OVERRIDES */ body { position: relative; background: #ecebe8; margin: 0; padding: 0; font-family: "lato","helvetica neue",helvetica,arial,sans-serif; font-size: 16px; font-weight: 300; color: #66625b; } a:link, a:visited { font-family: "lato","helvetica neue",helvetica,arial,sans-serif !important; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; font-weight: 300; color: #f8694d; } a:hover { text-decoration: underline; color: #d7492e; } h2, h3, h4, h5 { font-family: "lato","helvetica neue",helvetica,arial,sans-serif !important; color: #2b2b2b !important; margin-bottom: 20px !important; cursor: default; } div, p, li { font-family: "lato","helvetica neue",helvetica,arial,sans-serif !important; color: #66625b; } b,strong { color: #2b2b2b; } input[type="submit"] { background: #FE6D4C; border: none; border-radius: 4px; height: 64px; line-height: 64px; outline: none; margin: 0 auto; padding: 0 80px; font-weight: 300; font-size: 24px; color: #fff; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } input[type="submit"]:hover { background: #e75a3a; } .support-body, .question-body, #form, .pagination, .reply, .condensed { background: none !important; } </style>  </head> <body> <div id="flash" class="flash_html"><div class="agent_notifier_msg a-flash flash_notice"> </div> </div> <header> <a class="addthis-logo" href="//web.archive.org/web/20140702135609/http://www.addthis.com/" title="AddThis">AddThis</a> <div class="header-right"> <form action="/web/20140702135609/http://support.addthis.com/customer/portal/articles/search" method="get" id="support-search" class="support-search-small"> <input id="q" maxlength="100" name="q" type="text" value=""/> <div id="question-mask" class="question-small">Enter a search term here.</div> <input id="support-search-submit" type="submit" value="Search"/> </form> </div> <div class="container page-title"> <h1><a href="/web/20140702135609/http://support.addthis.com/" title="AddThis Support">Support</a></h1> </div> </header> <div id="company-support-portal"> <div class="wrapper">   <div id="support-main" class="support-main"> <div id="breadcrumbs"> <a href="/web/20140702135609/http://support.addthis.com/">Home</a> &rsaquo; <a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/568052-debugging/articles">Debugging</a> &rsaquo; Debugging CSS & JavaScript </div> <div class="support-body"> <div class="content article"> <div class="title"> <h3>Debugging CSS & JavaScript</h3> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_compact"></a> </div> </div> <div class="article-content"> <p>Many support requests involve AddThis styles or scripts that are conflicting with the AddThis code. Debugging these sorts of conflicts is pretty easy with the right tools, and these are built into every modern browser. In this post I'll be using <a href="https://web.archive.org/web/20140702135609/https://developer.apple.com/technologies/safari/developer-tools.html">Safari's Web Developer Tools</a>, but <a href="https://web.archive.org/web/20140702135609/https://developers.google.com/chrome-developer-tools/">Google Chrome's Web Inspector</a>, <a href="https://web.archive.org/web/20140702135609/http://getfirebug.com/">Firebug for Firefox</a>, <a href="https://web.archive.org/web/20140702135609/http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx">Internet Explorer's Developer Tools</a> can do similar things.</p> <h4>Debugging CSS Conflicts</h4> <p>Since AddThis code is built from <a href="https://web.archive.org/web/20140702135609/https://developer.mozilla.org/en-US/docs/DOM/element">DOM elements</a>, instead of Flash objects or similar non-standard elements, other scripts CSS rules can affect them. This is both a good thing, for instance when you want to <a href="https://web.archive.org/web/20140702135609/http://support.addthis.com/customer/portal/articles/84700-how-do-i-center-the-toolbox-">center the toolbox</a>, but can be a problem if your stylesheets have overly-broad rules in them. For example, this rule:</p> <pre class="prettyprint"> <style> a { color:white !important; } </style> </pre> <p>Will result in something like this:</p> <p><img alt="The counter text is white" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/vgnYj.png" title=""/></p> <p>It looks like the counter isn't loaded, but it's there, and you can see it if you select it:</p> <p><img alt="Like magic!" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/mzdZ9.png" title=""/></p> <p>To debug overly broad CSS rules, control - or right-click - on the element you wish to inspect, then select "Inspect Element":</p> <img alt="Inspect Element Selection" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/GGggR.png" title=""/> <p>This will take you to a window where you can see all the CSS rules that apply to that element. Search through them to find the one that's not from AddThis and then click the check box to the left to disable it. You'll notice that it also gives you the filename and line number of the rule you're disabling, so you can go straight to that rule in your CSS file and fix it.</p> <h4>Debugging JavaScript Problems</h4> <p>Debugging JavaScript can be a bit more difficult. The first thing to check if AddThis isn't showing up at all is if the proper variables are set on the page. First, right click anywhere on the page and select "Show Page Source." Then, type 'addthis_config' into the small area at the bottom of the window, next to the blue greater-than sign and then push enter. If the code is set up properly on your page you should see something like this:</p> <p><img alt="addthis_config Output" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/R2Xn5.png" style="height: 75%; width: 75%;" title=""/></p> <p>This will let you check whether your configuration values are correct or if they're possibly getting overridden by re-declaring the addthis_config variable elsewhere on the page. Other good ones to check are addthis_share, which lets you check the sharing configuration, and just addthis, which will verify that our code is being loaded properly.</p> <p>Another problem I see a lot is errors in other JavaScript on the page causing the buttons not to render. AddThis buttons are rendered, or put on the page, using JavaScript. If there is an error in other JavaScript on the page that halts the execution of scripts on the page then our buttons won't show up:</p> <p><img alt="They're not there" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/MIxwY.png" style="height: 75%; width: 75%;" title=""/></p> <p>This page has an onload attribute in the body that isn't a valid function:</p> <pre class="prettyprint"> <body onload="AFunctionThatDoesntExist()"></pre> <p>To find out where this error is, right-click on the page and select "Show Page Source" again. Then, select the error icon in the upper left corner of the Developer Tools window. (You may have to display the window's left sidebar to see it.)</p> <img alt="Onload Error Window" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/LLoOi.png" style="height: 75%; width: 75%;" title=""/> <p>Now that we know what the problem is, we can fix it. In this case, all we have to do is define a function named AFunctionThatDoesntExist, like this:</p> <pre class="prettyprint"> <script type="text/javascript"> function AFunctionThatDoesntExist(){ var docBody = document.getElementsByTagName('body'); var mySubheading = document.createElement('h4'); var myText = document.createTextNode('That function does exist!'); mySubheading.appendChild(myText); docBody[0].appendChild(mySubheading); } </script> </pre> <p>Then the AddThis buttons will show up after the function runs:</p> <p><img alt="AddThis displaying after the function appends text to the document" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/vbk5P.png" style="height: 75%; width: 75%;" title=""/></p> <h4>Debugging Bigger Problems</h4> <p><strong>Note: This is for advanced users who don't mind editing HTML or using a command line</strong></p> <p>Sometimes you're not sure what file has the CSS or JavaScript conflict in it. In these case you'll have to disable the CSS and/or JavaScript on the page until you get the buttons to work, then figure out what conflicts are occurring.</p> <p>Here's how I'd do it on a Mac, but the steps are similar for a PC. First, get a web server. For Mac users this is built in. Just go into the Sharing preference pane in System Preferences and check "Web Sharing."</p> <p>Then, open up the Terminal app in your Applications folder, which will give you something like this:</p> <p><img alt="A Terminal Window" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/4QxCK.png" title=""/></p> <p>At the prompt, type this command (without the dollar sign.)</p> <pre class="prettyprint"> $ curl http://www.example.com/ > Sites/example.html </pre> <p>(Replace http://www.example.com/ with the URL of the page you want to debug.) This will download the source of the page to your Sites folder in a file example.html. Open this file in a text editor and add the following just after the <head> tag:</p> <pre class="prettyprint"> <base href="http://www.example.com/"/></pre> <p>(Again, replace http://www.example.com with the URL of the page you're debugging.) Now open your browser and go to: http://localhost/~[user]/example.html where [user] is replaced with your username. Your page should show up with all the images and scripts.</p> <p><img alt="Example page from my local server" src="https://web.archive.org/web/20140702135609im_/http://i.imgur.com/pgKYn.png" style="height: 75%; width: 75%;" title=""/></p> <p>Once you've got that, edit the page in the same text editor to start removing JavaScript and CSS, refreshing the page after each edit to see if it fixed the issue. Once you find the AddThis buttons behaving like you should, replace all but the last item you removed to see if that's the culprit.</p> <p>Once you've found the culprit it's up to you to decide whether to keep using it, upgrade to a newer version that might not have a bug (if it's a third-party library), or <a href="https://web.archive.org/web/20140702135609/mailto:support@addthis.com">contact us</a> to see if we have a workaround. Please note that we don't support any external JavaScript beyond helping you find out that there's a problem.</p> Looking for errors like this before you contact our support team might help you save time and frustration when AddThis is acting up. <div class="meta">Last Updated: Sep 12, 2013 03:34PM EDT</div> </div> <div id="rate_article_container" style="display:none;"> <div id="rate_article"> <div> <a href="https://web.archive.org/web/20140702135609/http://support.addthis.com/customer/en/portal/articles/1296781/rate?rating=1" class="rate_link" data-method="post" data-remote="true" rel="nofollow"> Yes </a> <span> I found this article helpful </span> </div> <div class="rate-link-down"> <a href="https://web.archive.org/web/20140702135609/http://support.addthis.com/customer/en/portal/articles/1296781/rate?rating=0" class="rate_link" data-method="post" data-remote="true" rel="nofollow"> No</a> <span> I did not find this article helpful </span> </div> </div> </div> <script> $(document).ready(function() { $.get('/customer/en/portal/articles/1296781/is_rateable.json', function(json) { if (json.is_rateable) { $("#rate_article_container").show(); } }); }); </script> </div> </div>  <div id="footer"> <br/> <a href="https://web.archive.org/web/20140702135609/http://www.desk.com/">Customer service software</a> powered by Desk.com </div> </div>   <div id="support-side">   <h3>General Topics</h3> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/174668-getting-started/articles">Getting Started</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/57025-plugins-for-blogs-cms/articles">Plugins for Blogs & CMS</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/38604-customizing-addthis/articles">Customizing AddThis</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/57074-buttons-counters/articles">Buttons & Counters</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/38611-understanding-analytics/articles">Analytics</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/90823-accounts-settings/articles">Accounts & Settings</a></div> <div class="kb"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/topics/132578-toolbars/articles">Sharing Tools and Toolbars</a></div> <div class="kb"> </div> <h3>Developers</h3> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381262-addthis-api-and-sdks">API and SDK Overview</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381263-addthis-sharing-button-api">Sharing Button API</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api">Smart Layers API</a> <small class="pill-new">New!</small></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/524574-welcome-bar-api">Welcome Bar API</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/521730-trending-content-box-api">Trending Content Box API</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381268-content-feeds">Content Feeds</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381264-addthis-analytics-api">Analytics API</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381265-addthis-sharing-endpoints">Sharing Endpoints</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381266-services-api-beta-?t=89322">Services API</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381267-addthis-web-service-framework">Web Service Framework</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381270-addthis-for-ios-quick-start-guide">iOS</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381271-addthis-for-android-quickstart-guide">Android</a></div> <div class="api"><a href="/web/20140702135609/http://support.addthis.com/customer/portal/articles/381274-flash-installation">Flash</a></div> </div> <div style="clear:both;"></div> </div> </div>  <div id="fb-root"></div>  <div id="desk-external-variables-header" class="desk-external-variables"> <div id="read_only"></div> <div id="site-default_mailbox">help@addthis.com</div> <div id="desk_javascript_host">http://assets01.desk.com/</div> <div id="twitter_enabled">false</div> <div id="twitter_username">desk</div> <div id="system-snippets-loading">Loading</div> <div id="system-snippets-seconds_ago">seconds ago</div> <div id="system-snippets-a_minute_ago">a minute ago</div> <div id="system-snippets-minutes_ago">minutes ago</div> <div id="system-snippets-an_hour_ago">an hour ago</div> <div id="system-snippets-hours_ago">hours ago</div> <div id="system-snippets-a_day_ago">a day ago</div> <div id="system-snippets-days_ago">days ago</div> <div id="system-snippets-about">about</div> <div id="enable_gs">false</div> <div id="system-snippets-invalid_characters_found">Invalid characters found</div> <div id="site-search_autocomplete_articles_url">/customer/en/portal/articles/autocomplete</div> <div id="search-term"></div> </div> <footer> <div class="container-fluid"> <p>Want to choose whether you receive targeted advertising?  Go to our <a href="//web.archive.org/web/20140702135609/http://www.addthis.com/privacy/opt-out">opt-out</a> page.</p> <p>© 2014 AddThis.  Made with Love.</p> <a class="btn-getstarted" href="//web.archive.org/web/20140702135609/http://www.addthis.com/?r=0#widgets">Get Started</a> </div> </footer> <script type="text/javascript" src="//web.archive.org/web/20140702135609js_/http://s7.addthis.com/js/300/addthis_widget.js#pub=at_com"></script> <script src="//web.archive.org/web/20140702135609js_/http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&skin=default"></script> <script type="text/javascript" src="https://web.archive.org/web/20140702135609js_/http://assets01.desk.com/portal/desk.portal.shared.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20140702135609js_/http://assets01.desk.com/portal/desk.portal.header.js"></script> <script type="text/javascript" src="https://web.archive.org/web/20140702135609js_/http://assets01.desk.com/portal/desk.portal.body.layout_footer.js"></script> </body> </html>

CINXE.COM

AddThis | Debugging CSS & JavaScript