diff --git a/.gitignore b/.gitignore
index 36bc21c..ebd16f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules/
-.sass-cache/
\ No newline at end of file
+.sass-cache/
+.idea/
+js/
diff --git a/README.md b/README.md
index ab3c6a7..5075b23 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,10 @@ Options (any can be provided as a function), with their defaults:
     initialDelay: 3,
 
     // How long should we wait between retries.
-    delay: (1.5 * last delay, capped at 1 hour)
+    delay: (1.5 * last delay, capped at 1 hour),
+    
+    // Should we display cancel button so the user can stop the automatically reconnect proccess 
+    cancel: false
   },
 
   // Should we store and attempt to remake requests which fail while the connection is down.
diff --git a/coffee/offline.coffee b/coffee/offline.coffee
index df50587..9bf1841 100644
--- a/coffee/offline.coffee
+++ b/coffee/offline.coffee
@@ -63,7 +63,7 @@ Offline.getOption = (key) ->
 # In Chrome they mean that the internet connection was lost or restored
 window.addEventListener? 'online', ->
   # The event fires slightly before the browser is ready to make a request
-  setTimeout Offline.confirmUp, 100
+  (Offline.reconnect.state isnt 'canceled')? setTimeout Offline.confirmUp, 100
 , false
 
 window.addEventListener? 'offline', ->
@@ -115,7 +115,7 @@ Offline.off = (event, handler) ->
 
 Offline.trigger = (event) ->
   if handlers[event]?
-    # we have to make a copy of the handlers since its possible that the called functions will modify the handlers array by calling off/on 
+    # we have to make a copy of the handlers since its possible that the called functions will modify the handlers array by calling off/on
     for [ctx, handler] in handlers[event][..]
       handler.call(ctx)
 
diff --git a/coffee/reconnect.coffee b/coffee/reconnect.coffee
index 28086e7..9684089 100644
--- a/coffee/reconnect.coffee
+++ b/coffee/reconnect.coffee
@@ -26,12 +26,30 @@ tick = ->
     tryNow()
 
 tryNow = ->
-  return if rc.state isnt 'waiting'
+  return if rc.state isnt 'waiting' and rc.state isnt 'canceled'
 
-  Offline.trigger 'reconnect:connecting'
-  rc.state = 'connecting'
+  if (rc.state is 'canceled')
+    reset()
 
-  Offline.check()
+    rc.state = 'waiting'
+
+    Offline.trigger 'reconnect:started'
+    retryIntv = setInterval tick, 1000
+  else
+    Offline.trigger 'reconnect:connecting'
+    rc.state = 'connecting'
+
+    Offline.check()
+
+cancel = ->
+
+  if retryIntv?
+    clearInterval retryIntv
+
+  reset()
+
+  rc.state = 'canceled'
+  Offline.trigger 'reconnect:canceled'
 
 down = ->
   return unless Offline.getOption('reconnect')
@@ -39,7 +57,7 @@ down = ->
   reset()
 
   rc.state = 'waiting'
-  
+
   Offline.trigger 'reconnect:started'
   retryIntv = setInterval tick, 1000
 
@@ -58,6 +76,7 @@ nope = ->
     next()
 
 rc.tryNow = tryNow
+rc.cancel = cancel
 
 reset()
 
diff --git a/coffee/ui.coffee b/coffee/ui.coffee
index 12b0910..b600bcc 100644
--- a/coffee/ui.coffee
+++ b/coffee/ui.coffee
@@ -3,6 +3,7 @@ unless window.Offline
 
 TEMPLATE = '<div class="offline-ui"><div class="offline-ui-content"></div></div>'
 RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>'
+CANCEL_TEMPLATE = '<a href class="offline-ui-cancel"></a>'
 
 createFromHTML = (html) ->
   el = document.createElement('div')
@@ -49,7 +50,21 @@ render = ->
   document.body.appendChild el
 
   if Offline.reconnect? and Offline.getOption('reconnect')
-    el.appendChild createFromHTML RETRY_TEMPLATE
+    if Offline.getOption('reconnect.cancel')
+      el.appendChild createFromHTML CANCEL_TEMPLATE
+
+      cancel_button = el.querySelector('.offline-ui-cancel')
+      cancel_handler = (e) ->
+        e.preventDefault()
+
+        Offline.reconnect.cancel()
+
+      if cancel_button.addEventListener?
+        cancel_button.addEventListener 'click', cancel_handler, false
+      else
+        cancel_button.attachEvent 'click', cancel_handler
+
+      el.appendChild createFromHTML RETRY_TEMPLATE
 
     button = el.querySelector('.offline-ui-retry')
     handler = (e) ->
@@ -83,6 +98,9 @@ init = ->
     flashClass 'offline-ui-down-2s', 2
     flashClass 'offline-ui-down-5s', 5
 
+  Offline.on 'reconnect:started', ->
+    removeClass 'offline-ui-reconnect-canceled'
+
   Offline.on 'reconnect:connecting', ->
     addClass 'offline-ui-connecting'
     removeClass 'offline-ui-waiting'
@@ -102,6 +120,9 @@ init = ->
     content.setAttribute 'data-retry-in-value', null
     content.setAttribute 'data-retry-in-unit', null
 
+  Offline.on 'reconnect:canceled', ->
+    addClass 'offline-ui-reconnect-canceled'
+
   Offline.on 'reconnect:failure', ->
     flashClass 'offline-ui-reconnect-failed-2s', 2
     flashClass 'offline-ui-reconnect-failed-5s', 5
diff --git a/js/offline.js b/js/offline.js
index 30bbea9..098030f 100644
--- a/js/offline.js
+++ b/js/offline.js
@@ -75,7 +75,8 @@
 
   if (typeof window.addEventListener === "function") {
     window.addEventListener('online', function() {
-      return setTimeout(Offline.confirmUp, 100);
+      var base;
+      return typeof (base = Offline.reconnect.state !== 'canceled') === "function" ? base(setTimeout(Offline.confirmUp, 100)) : void 0;
     }, false);
   }
 
diff --git a/js/reconnect.js b/js/reconnect.js
index 69fd4f7..46f58ee 100644
--- a/js/reconnect.js
+++ b/js/reconnect.js
@@ -1,5 +1,5 @@
 (function() {
-  var down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
+  var cancel, down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
 
   if (!window.Offline) {
     throw new Error("Offline Reconnect brought in without offline.js");
@@ -36,12 +36,28 @@
   };
 
   tryNow = function() {
-    if (rc.state !== 'waiting') {
+    if (rc.state !== 'waiting' && rc.state !== 'canceled') {
       return;
     }
-    Offline.trigger('reconnect:connecting');
-    rc.state = 'connecting';
-    return Offline.check();
+    if (rc.state === 'canceled') {
+      reset();
+      rc.state = 'waiting';
+      Offline.trigger('reconnect:started');
+      return retryIntv = setInterval(tick, 1000);
+    } else {
+      Offline.trigger('reconnect:connecting');
+      rc.state = 'connecting';
+      return Offline.check();
+    }
+  };
+
+  cancel = function() {
+    if (retryIntv != null) {
+      clearInterval(retryIntv);
+    }
+    reset();
+    rc.state = 'canceled';
+    return Offline.trigger('reconnect:canceled');
   };
 
   down = function() {
@@ -74,6 +90,8 @@
 
   rc.tryNow = tryNow;
 
+  rc.cancel = cancel;
+
   reset();
 
   Offline.on('down', down);
diff --git a/js/ui.js b/js/ui.js
index 3634fe4..f9680a9 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,5 +1,5 @@
 (function() {
-  var RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
+  var CANCEL_TEMPLATE, RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
 
   if (!window.Offline) {
     throw new Error("Offline UI brought in without offline.js");
@@ -9,6 +9,8 @@
 
   RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>';
 
+  CANCEL_TEMPLATE = '<a href class="offline-ui-cancel"></a>';
+
   createFromHTML = function(html) {
     var el;
     el = document.createElement('div');
@@ -59,11 +61,24 @@
   };
 
   render = function() {
-    var button, handler;
+    var button, cancel_button, cancel_handler, handler;
     el = createFromHTML(TEMPLATE);
     document.body.appendChild(el);
     if ((Offline.reconnect != null) && Offline.getOption('reconnect')) {
-      el.appendChild(createFromHTML(RETRY_TEMPLATE));
+      if (Offline.getOption('reconnect.cancel')) {
+        el.appendChild(createFromHTML(CANCEL_TEMPLATE));
+        cancel_button = el.querySelector('.offline-ui-cancel');
+        cancel_handler = function(e) {
+          e.preventDefault();
+          return Offline.reconnect.cancel();
+        };
+        if (cancel_button.addEventListener != null) {
+          cancel_button.addEventListener('click', cancel_handler, false);
+        } else {
+          cancel_button.attachEvent('click', cancel_handler);
+        }
+        el.appendChild(createFromHTML(RETRY_TEMPLATE));
+      }
       button = el.querySelector('.offline-ui-retry');
       handler = function(e) {
         e.preventDefault();
@@ -93,6 +108,9 @@
       flashClass('offline-ui-down-2s', 2);
       return flashClass('offline-ui-down-5s', 5);
     });
+    Offline.on('reconnect:started', function() {
+      return removeClass('offline-ui-reconnect-canceled');
+    });
     Offline.on('reconnect:connecting', function() {
       addClass('offline-ui-connecting');
       return removeClass('offline-ui-waiting');
@@ -110,6 +128,9 @@
       content.setAttribute('data-retry-in-value', null);
       return content.setAttribute('data-retry-in-unit', null);
     });
+    Offline.on('reconnect:canceled', function() {
+      return addClass('offline-ui-reconnect-canceled');
+    });
     Offline.on('reconnect:failure', function() {
       flashClass('offline-ui-reconnect-failed-2s', 2);
       return flashClass('offline-ui-reconnect-failed-5s', 5);
diff --git a/offline.js b/offline.js
index 1d16ae2..a30aa48 100644
--- a/offline.js
+++ b/offline.js
@@ -33,7 +33,7 @@
     deDupBody:!1
   }, grab = function(obj, key) {
     var cur, i, j, len, part, parts;
-    for (cur = obj, parts = key.split("."), i = j = 0, len = parts.length; len > j && (part = parts[i], 
+    for (cur = obj, parts = key.split("."), i = j = 0, len = parts.length; j < len && (part = parts[i], 
     cur = cur[part], "object" == typeof cur); i = ++j) ;
     return i === parts.length - 1 ? cur :void 0;
   }, Offline.getOption = function(key) {
@@ -41,19 +41,20 @@
     return val = null != (ref = grab(Offline.options, key)) ? ref :grab(defaultOptions, key), 
     "function" == typeof val ? val() :val;
   }, "function" == typeof window.addEventListener && window.addEventListener("online", function() {
-    return setTimeout(Offline.confirmUp, 100);
+    var base;
+    return "function" == typeof (base = "canceled" !== Offline.reconnect.state) ? base(setTimeout(Offline.confirmUp, 100)) :void 0;
   }, !1), "function" == typeof window.addEventListener && window.addEventListener("offline", function() {
     return Offline.confirmDown();
   }, !1), Offline.state = "up", Offline.markUp = function() {
-    return Offline.trigger("confirmed-up"), "up" !== Offline.state ? (Offline.state = "up", 
-    Offline.trigger("up")) :void 0;
+    if (Offline.trigger("confirmed-up"), "up" !== Offline.state) return Offline.state = "up", 
+    Offline.trigger("up");
   }, Offline.markDown = function() {
-    return Offline.trigger("confirmed-down"), "down" !== Offline.state ? (Offline.state = "down", 
-    Offline.trigger("down")) :void 0;
+    if (Offline.trigger("confirmed-down"), "down" !== Offline.state) return Offline.state = "down", 
+    Offline.trigger("down");
   }, handlers = {}, Offline.on = function(event, handler, ctx) {
     var e, events, j, len, results;
     if (events = event.split(" "), events.length > 1) {
-      for (results = [], j = 0, len = events.length; len > j; j++) e = events[j], results.push(Offline.on(e, handler, ctx));
+      for (results = [], j = 0, len = events.length; j < len; j++) e = events[j], results.push(Offline.on(e, handler, ctx));
       return results;
     }
     return null == handlers[event] && (handlers[event] = []), handlers[event].push([ ctx, handler ]);
@@ -70,7 +71,7 @@
   }, Offline.trigger = function(event) {
     var ctx, handler, j, len, ref, ref1, results;
     if (null != handlers[event]) {
-      for (ref = handlers[event].slice(0), results = [], j = 0, len = ref.length; len > j; j++) ref1 = ref[j], 
+      for (ref = handlers[event].slice(0), results = [], j = 0, len = ref.length; j < len; j++) ref1 = ref[j], 
       ctx = ref1[0], handler = ref1[1], results.push(handler.call(ctx));
       return results;
     }
@@ -106,7 +107,7 @@
     return Offline.trigger("checking"), Offline.checks[Offline.getOption("checks.active")]();
   }, Offline.confirmUp = Offline.confirmDown = Offline.check, Offline.onXHR = function(cb) {
     var _XDomainRequest, _XMLHttpRequest, monitorXHR;
-    return monitorXHR = function(req, flags) {
+    if (monitorXHR = function(req, flags) {
       var _open;
       return _open = req.open, req.open = function(type, url, async, user, password) {
         return cb({
@@ -127,19 +128,19 @@
       }, _overrideMimeType = req.overrideMimeType, req.overrideMimeType = function(type) {
         return req.mimeType = type, _overrideMimeType.call(req, type);
       }, req;
-    }, extendNative(window.XMLHttpRequest, _XMLHttpRequest), null != window.XDomainRequest ? (_XDomainRequest = window.XDomainRequest, 
+    }, extendNative(window.XMLHttpRequest, _XMLHttpRequest), null != window.XDomainRequest) return _XDomainRequest = window.XDomainRequest, 
     window.XDomainRequest = function() {
       var req;
       return req = new _XDomainRequest(), monitorXHR(req), req;
-    }, extendNative(window.XDomainRequest, _XDomainRequest)) :void 0;
+    }, extendNative(window.XDomainRequest, _XDomainRequest);
   }, init = function() {
-    return Offline.getOption("interceptRequests") && Offline.onXHR(function(arg) {
+    if (Offline.getOption("interceptRequests") && Offline.onXHR(function(arg) {
       var xhr;
-      return xhr = arg.xhr, xhr.offline !== !1 ? checkXHR(xhr, Offline.markUp, Offline.confirmDown) :void 0;
-    }), Offline.getOption("checkOnLoad") ? Offline.check() :void 0;
+      if (xhr = arg.xhr, xhr.offline !== !1) return checkXHR(xhr, Offline.markUp, Offline.confirmDown);
+    }), Offline.getOption("checkOnLoad")) return Offline.check();
   }, setTimeout(init, 0), window.Offline = Offline;
 }).call(this), function() {
-  var down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
+  var cancel, down, next, nope, rc, reset, retryIntv, tick, tryNow, up;
   if (!window.Offline) throw new Error("Offline Reconnect brought in without offline.js");
   rc = Offline.reconnect = {}, retryIntv = null, reset = function() {
     var ref;
@@ -150,27 +151,31 @@
     return delay = null != (ref = Offline.getOption("reconnect.delay")) ? ref :Math.min(Math.ceil(1.5 * rc.delay), 3600), 
     rc.remaining = rc.delay = delay;
   }, tick = function() {
-    return "connecting" !== rc.state ? (rc.remaining -= 1, Offline.trigger("reconnect:tick"), 
-    0 === rc.remaining ? tryNow() :void 0) :void 0;
+    if ("connecting" !== rc.state) return rc.remaining -= 1, Offline.trigger("reconnect:tick"), 
+    0 === rc.remaining ? tryNow() :void 0;
   }, tryNow = function() {
-    return "waiting" === rc.state ? (Offline.trigger("reconnect:connecting"), rc.state = "connecting", 
-    Offline.check()) :void 0;
+    if ("waiting" === rc.state || "canceled" === rc.state) return "canceled" === rc.state ? (reset(), 
+    rc.state = "waiting", Offline.trigger("reconnect:started"), retryIntv = setInterval(tick, 1e3)) :(Offline.trigger("reconnect:connecting"), 
+    rc.state = "connecting", Offline.check());
+  }, cancel = function() {
+    return null != retryIntv && clearInterval(retryIntv), reset(), rc.state = "canceled", 
+    Offline.trigger("reconnect:canceled");
   }, down = function() {
-    return Offline.getOption("reconnect") ? (reset(), rc.state = "waiting", Offline.trigger("reconnect:started"), 
-    retryIntv = setInterval(tick, 1e3)) :void 0;
+    if (Offline.getOption("reconnect")) return reset(), rc.state = "waiting", Offline.trigger("reconnect:started"), 
+    retryIntv = setInterval(tick, 1e3);
   }, up = function() {
     return null != retryIntv && clearInterval(retryIntv), reset();
   }, nope = function() {
-    return Offline.getOption("reconnect") && "connecting" === rc.state ? (Offline.trigger("reconnect:failure"), 
+    if (Offline.getOption("reconnect")) return "connecting" === rc.state ? (Offline.trigger("reconnect:failure"), 
     rc.state = "waiting", next()) :void 0;
-  }, rc.tryNow = tryNow, reset(), Offline.on("down", down), Offline.on("confirmed-down", nope), 
+  }, rc.tryNow = tryNow, rc.cancel = cancel, reset(), Offline.on("down", down), Offline.on("confirmed-down", nope), 
   Offline.on("up", up);
 }.call(this), function() {
   var clear, flush, held, holdRequest, makeRequest, waitingOnConfirm;
   if (!window.Offline) throw new Error("Requests module brought in without offline.js");
   held = [], waitingOnConfirm = !1, holdRequest = function(req) {
-    return Offline.getOption("requests") !== !1 ? (Offline.trigger("requests:capture"), 
-    "down" !== Offline.state && (waitingOnConfirm = !0), held.push(req)) :void 0;
+    if (Offline.getOption("requests") !== !1) return Offline.trigger("requests:capture"), 
+    "down" !== Offline.state && (waitingOnConfirm = !0), held.push(req);
   }, makeRequest = function(arg) {
     var body, name, password, ref, type, url, user, val, xhr;
     if (xhr = arg.xhr, url = arg.url, type = arg.type, user = arg.user, password = arg.password, 
@@ -184,7 +189,7 @@
   }, flush = function() {
     var body, i, key, len, request, requests, url;
     if (Offline.getOption("requests") !== !1) {
-      for (Offline.trigger("requests:flush"), requests = {}, i = 0, len = held.length; len > i; i++) request = held[i], 
+      for (Offline.trigger("requests:flush"), requests = {}, i = 0, len = held.length; i < len; i++) request = held[i], 
       url = request.url.replace(/(\?|&)_=[0-9]+/, function(match, chr) {
         return "?" === chr ? chr :"";
       }), Offline.getOption("deDupBody") ? (body = request.body, body = "[object Object]" === body.toString() ? JSON.stringify(body) :body.toString(), 
@@ -193,31 +198,31 @@
       return clear();
     }
   }, setTimeout(function() {
-    return Offline.getOption("requests") !== !1 ? (Offline.on("confirmed-up", function() {
-      return waitingOnConfirm ? (waitingOnConfirm = !1, clear()) :void 0;
+    if (Offline.getOption("requests") !== !1) return Offline.on("confirmed-up", function() {
+      if (waitingOnConfirm) return waitingOnConfirm = !1, clear();
     }), Offline.on("up", flush), Offline.on("down", function() {
       return waitingOnConfirm = !1;
     }), Offline.onXHR(function(request) {
       var _onreadystatechange, _send, async, hold, xhr;
-      return xhr = request.xhr, async = request.async, xhr.offline !== !1 && (hold = function() {
+      if (xhr = request.xhr, async = request.async, xhr.offline !== !1 && (hold = function() {
         return holdRequest(request);
       }, _send = xhr.send, xhr.send = function(body) {
         return request.body = body, _send.apply(xhr, arguments);
-      }, async) ? null === xhr.onprogress ? (xhr.addEventListener("error", hold, !1), 
+      }, async)) return null === xhr.onprogress ? (xhr.addEventListener("error", hold, !1), 
       xhr.addEventListener("timeout", hold, !1)) :(_onreadystatechange = xhr.onreadystatechange, 
       xhr.onreadystatechange = function() {
         return 0 === xhr.readyState ? hold() :4 === xhr.readyState && (0 === xhr.status || xhr.status >= 12e3) && hold(), 
         "function" == typeof _onreadystatechange ? _onreadystatechange.apply(null, arguments) :void 0;
-      }) :void 0;
+      });
     }), Offline.requests = {
       flush:flush,
       clear:clear
-    }) :void 0;
+    };
   }, 0);
 }.call(this), function() {
   var base, e, i, len, ref, simulate, state;
   if (!Offline) throw new Error("Offline simulate brought in without offline.js");
-  for (ref = [ "up", "down" ], i = 0, len = ref.length; len > i; i++) {
+  for (ref = [ "up", "down" ], i = 0, len = ref.length; i < len; i++) {
     state = ref[i];
     try {
       simulate = document.querySelector("script[data-simulate='" + state + "']") || ("undefined" != typeof localStorage && null !== localStorage ? localStorage.OFFLINE_SIMULATE :void 0) === state;
@@ -228,10 +233,11 @@
   simulate && (null == Offline.options && (Offline.options = {}), null == (base = Offline.options).checks && (base.checks = {}), 
   Offline.options.checks.active = state);
 }.call(this), function() {
-  var RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
+  var CANCEL_TEMPLATE, RETRY_TEMPLATE, TEMPLATE, _onreadystatechange, addClass, content, createFromHTML, el, flashClass, flashTimeouts, init, removeClass, render, roundTime;
   if (!window.Offline) throw new Error("Offline UI brought in without offline.js");
   TEMPLATE = '<div class="offline-ui"><div class="offline-ui-content"></div></div>', 
-  RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>', createFromHTML = function(html) {
+  RETRY_TEMPLATE = '<a href class="offline-ui-retry"></a>', CANCEL_TEMPLATE = '<a href class="offline-ui-cancel"></a>', 
+  createFromHTML = function(html) {
     var el;
     return el = document.createElement("div"), el.innerHTML = html, el.children[0];
   }, el = content = null, addClass = function(name) {
@@ -255,9 +261,13 @@
     [ val, unit ];
     return [ "now", "" ];
   }, render = function() {
-    var button, handler;
-    return el = createFromHTML(TEMPLATE), document.body.appendChild(el), null != Offline.reconnect && Offline.getOption("reconnect") && (el.appendChild(createFromHTML(RETRY_TEMPLATE)), 
-    button = el.querySelector(".offline-ui-retry"), handler = function(e) {
+    var button, cancel_button, cancel_handler, handler;
+    return el = createFromHTML(TEMPLATE), document.body.appendChild(el), null != Offline.reconnect && Offline.getOption("reconnect") && (Offline.getOption("reconnect.cancel") && (el.appendChild(createFromHTML(CANCEL_TEMPLATE)), 
+    cancel_button = el.querySelector(".offline-ui-cancel"), cancel_handler = function(e) {
+      return e.preventDefault(), Offline.reconnect.cancel();
+    }, null != cancel_button.addEventListener ? cancel_button.addEventListener("click", cancel_handler, !1) :cancel_button.attachEvent("click", cancel_handler), 
+    el.appendChild(createFromHTML(RETRY_TEMPLATE))), button = el.querySelector(".offline-ui-retry"), 
+    handler = function(e) {
       return e.preventDefault(), Offline.reconnect.tryNow();
     }, null != button.addEventListener ? button.addEventListener("click", handler, !1) :button.attachEvent("click", handler)), 
     addClass("offline-ui-" + Offline.state), content = el.querySelector(".offline-ui-content");
@@ -268,6 +278,8 @@
     }), Offline.on("down", function() {
       return removeClass("offline-ui-up"), addClass("offline-ui-down"), flashClass("offline-ui-down-2s", 2), 
       flashClass("offline-ui-down-5s", 5);
+    }), Offline.on("reconnect:started", function() {
+      return removeClass("offline-ui-reconnect-canceled");
     }), Offline.on("reconnect:connecting", function() {
       return addClass("offline-ui-connecting"), removeClass("offline-ui-waiting");
     }), Offline.on("reconnect:tick", function() {
@@ -278,6 +290,8 @@
     }), Offline.on("reconnect:stopped", function() {
       return removeClass("offline-ui-connecting offline-ui-waiting"), content.setAttribute("data-retry-in-value", null), 
       content.setAttribute("data-retry-in-unit", null);
+    }), Offline.on("reconnect:canceled", function() {
+      return addClass("offline-ui-reconnect-canceled");
     }), Offline.on("reconnect:failure", function() {
       return flashClass("offline-ui-reconnect-failed-2s", 2), flashClass("offline-ui-reconnect-failed-5s", 5);
     }), Offline.on("reconnect:success", function() {
diff --git a/offline.min.js b/offline.min.js
index e5c33f8..cc9fa14 100644
--- a/offline.min.js
+++ b/offline.min.js
@@ -1,2 +1,2 @@
 /*! offline-js 0.7.18 */
-(function(){var a,b,c,d,e,f,g;d=function(a,b){var c,d,e,f;e=[];for(d in b.prototype)try{f=b.prototype[d],null==a[d]&&"function"!=typeof f?e.push(a[d]=f):e.push(void 0)}catch(g){c=g}return e},a={},a.options=window.Offline?window.Offline.options||{}:{},c={checks:{xhr:{url:function(){return"/favicon.ico?_="+(new Date).getTime()},timeout:5e3,type:"HEAD"},image:{url:function(){return"/favicon.ico?_="+(new Date).getTime()}},active:"xhr"},checkOnLoad:!1,interceptRequests:!0,reconnect:!0,deDupBody:!1},e=function(a,b){var c,d,e,f,g,h;for(c=a,h=b.split("."),d=e=0,f=h.length;f>e&&(g=h[d],c=c[g],"object"==typeof c);d=++e);return d===h.length-1?c:void 0},a.getOption=function(b){var d,f;return f=null!=(d=e(a.options,b))?d:e(c,b),"function"==typeof f?f():f},"function"==typeof window.addEventListener&&window.addEventListener("online",function(){return setTimeout(a.confirmUp,100)},!1),"function"==typeof window.addEventListener&&window.addEventListener("offline",function(){return a.confirmDown()},!1),a.state="up",a.markUp=function(){return a.trigger("confirmed-up"),"up"!==a.state?(a.state="up",a.trigger("up")):void 0},a.markDown=function(){return a.trigger("confirmed-down"),"down"!==a.state?(a.state="down",a.trigger("down")):void 0},f={},a.on=function(b,c,d){var e,g,h,i,j;if(g=b.split(" "),g.length>1){for(j=[],h=0,i=g.length;i>h;h++)e=g[h],j.push(a.on(e,c,d));return j}return null==f[b]&&(f[b]=[]),f[b].push([d,c])},a.off=function(a,b){var c,d,e,g,h;if(null!=f[a]){if(b){for(e=0,h=[];e<f[a].length;)g=f[a][e],d=g[0],c=g[1],c===b?h.push(f[a].splice(e,1)):h.push(e++);return h}return f[a]=[]}},a.trigger=function(a){var b,c,d,e,g,h,i;if(null!=f[a]){for(g=f[a].slice(0),i=[],d=0,e=g.length;e>d;d++)h=g[d],b=h[0],c=h[1],i.push(c.call(b));return i}},b=function(a,b,c){var d,e,f,g,h;return h=function(){return a.status&&a.status<12e3?b():c()},null===a.onprogress?(d=a.onerror,a.onerror=function(){return c(),"function"==typeof d?d.apply(null,arguments):void 0},g=a.ontimeout,a.ontimeout=function(){return c(),"function"==typeof g?g.apply(null,arguments):void 0},e=a.onload,a.onload=function(){return h(),"function"==typeof e?e.apply(null,arguments):void 0}):(f=a.onreadystatechange,a.onreadystatechange=function(){return 4===a.readyState?h():0===a.readyState&&c(),"function"==typeof f?f.apply(null,arguments):void 0})},a.checks={},a.checks.xhr=function(){var c,d;d=new XMLHttpRequest,d.offline=!1,d.open(a.getOption("checks.xhr.type"),a.getOption("checks.xhr.url"),!0),null!=d.timeout&&(d.timeout=a.getOption("checks.xhr.timeout")),b(d,a.markUp,a.markDown);try{d.send()}catch(e){c=e,a.markDown()}return d},a.checks.image=function(){var b;b=document.createElement("img"),b.onerror=a.markDown,b.onload=a.markUp,b.src=a.getOption("checks.image.url")},a.checks.down=a.markDown,a.checks.up=a.markUp,a.check=function(){return a.trigger("checking"),a.checks[a.getOption("checks.active")]()},a.confirmUp=a.confirmDown=a.check,a.onXHR=function(a){var b,c,e;return e=function(b,c){var d;return d=b.open,b.open=function(e,f,g,h,i){return a({type:e,url:f,async:g,flags:c,user:h,password:i,xhr:b}),d.apply(b,arguments)}},c=window.XMLHttpRequest,window.XMLHttpRequest=function(a){var b,d,f;return f=new c(a),e(f,a),d=f.setRequestHeader,f.headers={},f.setRequestHeader=function(a,b){return f.headers[a]=b,d.call(f,a,b)},b=f.overrideMimeType,f.overrideMimeType=function(a){return f.mimeType=a,b.call(f,a)},f},d(window.XMLHttpRequest,c),null!=window.XDomainRequest?(b=window.XDomainRequest,window.XDomainRequest=function(){var a;return a=new b,e(a),a},d(window.XDomainRequest,b)):void 0},g=function(){return a.getOption("interceptRequests")&&a.onXHR(function(c){var d;return d=c.xhr,d.offline!==!1?b(d,a.markUp,a.confirmDown):void 0}),a.getOption("checkOnLoad")?a.check():void 0},setTimeout(g,0),window.Offline=a}).call(this),function(){var a,b,c,d,e,f,g,h,i;if(!window.Offline)throw new Error("Offline Reconnect brought in without offline.js");d=Offline.reconnect={},f=null,e=function(){var a;return null!=d.state&&"inactive"!==d.state&&Offline.trigger("reconnect:stopped"),d.state="inactive",d.remaining=d.delay=null!=(a=Offline.getOption("reconnect.initialDelay"))?a:3},b=function(){var a,b;return a=null!=(b=Offline.getOption("reconnect.delay"))?b:Math.min(Math.ceil(1.5*d.delay),3600),d.remaining=d.delay=a},g=function(){return"connecting"!==d.state?(d.remaining-=1,Offline.trigger("reconnect:tick"),0===d.remaining?h():void 0):void 0},h=function(){return"waiting"===d.state?(Offline.trigger("reconnect:connecting"),d.state="connecting",Offline.check()):void 0},a=function(){return Offline.getOption("reconnect")?(e(),d.state="waiting",Offline.trigger("reconnect:started"),f=setInterval(g,1e3)):void 0},i=function(){return null!=f&&clearInterval(f),e()},c=function(){return Offline.getOption("reconnect")&&"connecting"===d.state?(Offline.trigger("reconnect:failure"),d.state="waiting",b()):void 0},d.tryNow=h,e(),Offline.on("down",a),Offline.on("confirmed-down",c),Offline.on("up",i)}.call(this),function(){var a,b,c,d,e,f;if(!window.Offline)throw new Error("Requests module brought in without offline.js");c=[],f=!1,d=function(a){return Offline.getOption("requests")!==!1?(Offline.trigger("requests:capture"),"down"!==Offline.state&&(f=!0),c.push(a)):void 0},e=function(a){var b,c,d,e,f,g,h,i,j;if(j=a.xhr,g=a.url,f=a.type,h=a.user,d=a.password,b=a.body,Offline.getOption("requests")!==!1){j.abort(),j.open(f,g,!0,h,d),e=j.headers;for(c in e)i=e[c],j.setRequestHeader(c,i);return j.mimeType&&j.overrideMimeType(j.mimeType),j.send(b)}},a=function(){return c=[]},b=function(){var b,d,f,g,h,i,j;if(Offline.getOption("requests")!==!1){for(Offline.trigger("requests:flush"),i={},d=0,g=c.length;g>d;d++)h=c[d],j=h.url.replace(/(\?|&)_=[0-9]+/,function(a,b){return"?"===b?b:""}),Offline.getOption("deDupBody")?(b=h.body,b="[object Object]"===b.toString()?JSON.stringify(b):b.toString(),i[h.type.toUpperCase()+" - "+j+" - "+b]=h):i[h.type.toUpperCase()+" - "+j]=h;for(f in i)h=i[f],e(h);return a()}},setTimeout(function(){return Offline.getOption("requests")!==!1?(Offline.on("confirmed-up",function(){return f?(f=!1,a()):void 0}),Offline.on("up",b),Offline.on("down",function(){return f=!1}),Offline.onXHR(function(a){var b,c,e,f,g;return g=a.xhr,e=a.async,g.offline!==!1&&(f=function(){return d(a)},c=g.send,g.send=function(b){return a.body=b,c.apply(g,arguments)},e)?null===g.onprogress?(g.addEventListener("error",f,!1),g.addEventListener("timeout",f,!1)):(b=g.onreadystatechange,g.onreadystatechange=function(){return 0===g.readyState?f():4===g.readyState&&(0===g.status||g.status>=12e3)&&f(),"function"==typeof b?b.apply(null,arguments):void 0}):void 0}),Offline.requests={flush:b,clear:a}):void 0},0)}.call(this),function(){var a,b,c,d,e,f,g;if(!Offline)throw new Error("Offline simulate brought in without offline.js");for(e=["up","down"],c=0,d=e.length;d>c;c++){g=e[c];try{f=document.querySelector("script[data-simulate='"+g+"']")||("undefined"!=typeof localStorage&&null!==localStorage?localStorage.OFFLINE_SIMULATE:void 0)===g}catch(h){b=h,f=!1}}f&&(null==Offline.options&&(Offline.options={}),null==(a=Offline.options).checks&&(a.checks={}),Offline.options.checks.active=g)}.call(this),function(){var a,b,c,d,e,f,g,h,i,j,k,l,m;if(!window.Offline)throw new Error("Offline UI brought in without offline.js");b='<div class="offline-ui"><div class="offline-ui-content"></div></div>',a='<a href class="offline-ui-retry"></a>',f=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},g=e=null,d=function(a){return k(a),g.className+=" "+a},k=function(a){return g.className=g.className.replace(new RegExp("(^| )"+a.split(" ").join("|")+"( |$)","gi")," ")},i={},h=function(a,b){return d(a),null!=i[a]&&clearTimeout(i[a]),i[a]=setTimeout(function(){return k(a),delete i[a]},1e3*b)},m=function(a){var b,c,d,e;d={day:86400,hour:3600,minute:60,second:1};for(c in d)if(b=d[c],a>=b)return e=Math.floor(a/b),[e,c];return["now",""]},l=function(){var c,h;return g=f(b),document.body.appendChild(g),null!=Offline.reconnect&&Offline.getOption("reconnect")&&(g.appendChild(f(a)),c=g.querySelector(".offline-ui-retry"),h=function(a){return a.preventDefault(),Offline.reconnect.tryNow()},null!=c.addEventListener?c.addEventListener("click",h,!1):c.attachEvent("click",h)),d("offline-ui-"+Offline.state),e=g.querySelector(".offline-ui-content")},j=function(){return l(),Offline.on("up",function(){return k("offline-ui-down"),d("offline-ui-up"),h("offline-ui-up-2s",2),h("offline-ui-up-5s",5)}),Offline.on("down",function(){return k("offline-ui-up"),d("offline-ui-down"),h("offline-ui-down-2s",2),h("offline-ui-down-5s",5)}),Offline.on("reconnect:connecting",function(){return d("offline-ui-connecting"),k("offline-ui-waiting")}),Offline.on("reconnect:tick",function(){var a,b,c;return d("offline-ui-waiting"),k("offline-ui-connecting"),a=m(Offline.reconnect.remaining),b=a[0],c=a[1],e.setAttribute("data-retry-in-value",b),e.setAttribute("data-retry-in-unit",c)}),Offline.on("reconnect:stopped",function(){return k("offline-ui-connecting offline-ui-waiting"),e.setAttribute("data-retry-in-value",null),e.setAttribute("data-retry-in-unit",null)}),Offline.on("reconnect:failure",function(){return h("offline-ui-reconnect-failed-2s",2),h("offline-ui-reconnect-failed-5s",5)}),Offline.on("reconnect:success",function(){return h("offline-ui-reconnect-succeeded-2s",2),h("offline-ui-reconnect-succeeded-5s",5)})},"complete"===document.readyState?j():null!=document.addEventListener?document.addEventListener("DOMContentLoaded",j,!1):(c=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&j(),"function"==typeof c?c.apply(null,arguments):void 0})}.call(this);
\ No newline at end of file
+(function(){var a,b,c,d,e,f,g;d=function(a,b){var c,d,e,f;e=[];for(d in b.prototype)try{f=b.prototype[d],null==a[d]&&"function"!=typeof f?e.push(a[d]=f):e.push(void 0)}catch(g){c=g}return e},a={},a.options=window.Offline?window.Offline.options||{}:{},c={checks:{xhr:{url:function(){return"/favicon.ico?_="+(new Date).getTime()},timeout:5e3,type:"HEAD"},image:{url:function(){return"/favicon.ico?_="+(new Date).getTime()}},active:"xhr"},checkOnLoad:!1,interceptRequests:!0,reconnect:!0,deDupBody:!1},e=function(a,b){var c,d,e,f,g,h;for(c=a,h=b.split("."),d=e=0,f=h.length;e<f&&(g=h[d],c=c[g],"object"==typeof c);d=++e);return d===h.length-1?c:void 0},a.getOption=function(b){var d,f;return f=null!=(d=e(a.options,b))?d:e(c,b),"function"==typeof f?f():f},"function"==typeof window.addEventListener&&window.addEventListener("online",function(){var b;return"function"==typeof(b="canceled"!==a.reconnect.state)?b(setTimeout(a.confirmUp,100)):void 0},!1),"function"==typeof window.addEventListener&&window.addEventListener("offline",function(){return a.confirmDown()},!1),a.state="up",a.markUp=function(){if(a.trigger("confirmed-up"),"up"!==a.state)return a.state="up",a.trigger("up")},a.markDown=function(){if(a.trigger("confirmed-down"),"down"!==a.state)return a.state="down",a.trigger("down")},f={},a.on=function(b,c,d){var e,g,h,i,j;if(g=b.split(" "),g.length>1){for(j=[],h=0,i=g.length;h<i;h++)e=g[h],j.push(a.on(e,c,d));return j}return null==f[b]&&(f[b]=[]),f[b].push([d,c])},a.off=function(a,b){var c,d,e,g,h;if(null!=f[a]){if(b){for(e=0,h=[];e<f[a].length;)g=f[a][e],d=g[0],c=g[1],c===b?h.push(f[a].splice(e,1)):h.push(e++);return h}return f[a]=[]}},a.trigger=function(a){var b,c,d,e,g,h,i;if(null!=f[a]){for(g=f[a].slice(0),i=[],d=0,e=g.length;d<e;d++)h=g[d],b=h[0],c=h[1],i.push(c.call(b));return i}},b=function(a,b,c){var d,e,f,g,h;return h=function(){return a.status&&a.status<12e3?b():c()},null===a.onprogress?(d=a.onerror,a.onerror=function(){return c(),"function"==typeof d?d.apply(null,arguments):void 0},g=a.ontimeout,a.ontimeout=function(){return c(),"function"==typeof g?g.apply(null,arguments):void 0},e=a.onload,a.onload=function(){return h(),"function"==typeof e?e.apply(null,arguments):void 0}):(f=a.onreadystatechange,a.onreadystatechange=function(){return 4===a.readyState?h():0===a.readyState&&c(),"function"==typeof f?f.apply(null,arguments):void 0})},a.checks={},a.checks.xhr=function(){var c,d;d=new XMLHttpRequest,d.offline=!1,d.open(a.getOption("checks.xhr.type"),a.getOption("checks.xhr.url"),!0),null!=d.timeout&&(d.timeout=a.getOption("checks.xhr.timeout")),b(d,a.markUp,a.markDown);try{d.send()}catch(e){c=e,a.markDown()}return d},a.checks.image=function(){var b;b=document.createElement("img"),b.onerror=a.markDown,b.onload=a.markUp,b.src=a.getOption("checks.image.url")},a.checks.down=a.markDown,a.checks.up=a.markUp,a.check=function(){return a.trigger("checking"),a.checks[a.getOption("checks.active")]()},a.confirmUp=a.confirmDown=a.check,a.onXHR=function(a){var b,c,e;if(e=function(b,c){var d;return d=b.open,b.open=function(e,f,g,h,i){return a({type:e,url:f,async:g,flags:c,user:h,password:i,xhr:b}),d.apply(b,arguments)}},c=window.XMLHttpRequest,window.XMLHttpRequest=function(a){var b,d,f;return f=new c(a),e(f,a),d=f.setRequestHeader,f.headers={},f.setRequestHeader=function(a,b){return f.headers[a]=b,d.call(f,a,b)},b=f.overrideMimeType,f.overrideMimeType=function(a){return f.mimeType=a,b.call(f,a)},f},d(window.XMLHttpRequest,c),null!=window.XDomainRequest)return b=window.XDomainRequest,window.XDomainRequest=function(){var a;return a=new b,e(a),a},d(window.XDomainRequest,b)},g=function(){if(a.getOption("interceptRequests")&&a.onXHR(function(c){var d;if(d=c.xhr,d.offline!==!1)return b(d,a.markUp,a.confirmDown)}),a.getOption("checkOnLoad"))return a.check()},setTimeout(g,0),window.Offline=a}).call(this),function(){var a,b,c,d,e,f,g,h,i,j;if(!window.Offline)throw new Error("Offline Reconnect brought in without offline.js");e=Offline.reconnect={},g=null,f=function(){var a;return null!=e.state&&"inactive"!==e.state&&Offline.trigger("reconnect:stopped"),e.state="inactive",e.remaining=e.delay=null!=(a=Offline.getOption("reconnect.initialDelay"))?a:3},c=function(){var a,b;return a=null!=(b=Offline.getOption("reconnect.delay"))?b:Math.min(Math.ceil(1.5*e.delay),3600),e.remaining=e.delay=a},h=function(){if("connecting"!==e.state)return e.remaining-=1,Offline.trigger("reconnect:tick"),0===e.remaining?i():void 0},i=function(){if("waiting"===e.state||"canceled"===e.state)return"canceled"===e.state?(f(),e.state="waiting",Offline.trigger("reconnect:started"),g=setInterval(h,1e3)):(Offline.trigger("reconnect:connecting"),e.state="connecting",Offline.check())},a=function(){return null!=g&&clearInterval(g),f(),e.state="canceled",Offline.trigger("reconnect:canceled")},b=function(){if(Offline.getOption("reconnect"))return f(),e.state="waiting",Offline.trigger("reconnect:started"),g=setInterval(h,1e3)},j=function(){return null!=g&&clearInterval(g),f()},d=function(){if(Offline.getOption("reconnect"))return"connecting"===e.state?(Offline.trigger("reconnect:failure"),e.state="waiting",c()):void 0},e.tryNow=i,e.cancel=a,f(),Offline.on("down",b),Offline.on("confirmed-down",d),Offline.on("up",j)}.call(this),function(){var a,b,c,d,e,f;if(!window.Offline)throw new Error("Requests module brought in without offline.js");c=[],f=!1,d=function(a){if(Offline.getOption("requests")!==!1)return Offline.trigger("requests:capture"),"down"!==Offline.state&&(f=!0),c.push(a)},e=function(a){var b,c,d,e,f,g,h,i,j;if(j=a.xhr,g=a.url,f=a.type,h=a.user,d=a.password,b=a.body,Offline.getOption("requests")!==!1){j.abort(),j.open(f,g,!0,h,d),e=j.headers;for(c in e)i=e[c],j.setRequestHeader(c,i);return j.mimeType&&j.overrideMimeType(j.mimeType),j.send(b)}},a=function(){return c=[]},b=function(){var b,d,f,g,h,i,j;if(Offline.getOption("requests")!==!1){for(Offline.trigger("requests:flush"),i={},d=0,g=c.length;d<g;d++)h=c[d],j=h.url.replace(/(\?|&)_=[0-9]+/,function(a,b){return"?"===b?b:""}),Offline.getOption("deDupBody")?(b=h.body,b="[object Object]"===b.toString()?JSON.stringify(b):b.toString(),i[h.type.toUpperCase()+" - "+j+" - "+b]=h):i[h.type.toUpperCase()+" - "+j]=h;for(f in i)h=i[f],e(h);return a()}},setTimeout(function(){if(Offline.getOption("requests")!==!1)return Offline.on("confirmed-up",function(){if(f)return f=!1,a()}),Offline.on("up",b),Offline.on("down",function(){return f=!1}),Offline.onXHR(function(a){var b,c,e,f,g;if(g=a.xhr,e=a.async,g.offline!==!1&&(f=function(){return d(a)},c=g.send,g.send=function(b){return a.body=b,c.apply(g,arguments)},e))return null===g.onprogress?(g.addEventListener("error",f,!1),g.addEventListener("timeout",f,!1)):(b=g.onreadystatechange,g.onreadystatechange=function(){return 0===g.readyState?f():4===g.readyState&&(0===g.status||g.status>=12e3)&&f(),"function"==typeof b?b.apply(null,arguments):void 0})}),Offline.requests={flush:b,clear:a}},0)}.call(this),function(){var a,b,c,d,e,f,g;if(!Offline)throw new Error("Offline simulate brought in without offline.js");for(e=["up","down"],c=0,d=e.length;c<d;c++){g=e[c];try{f=document.querySelector("script[data-simulate='"+g+"']")||("undefined"!=typeof localStorage&&null!==localStorage?localStorage.OFFLINE_SIMULATE:void 0)===g}catch(h){b=h,f=!1}}f&&(null==Offline.options&&(Offline.options={}),null==(a=Offline.options).checks&&(a.checks={}),Offline.options.checks.active=g)}.call(this),function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n;if(!window.Offline)throw new Error("Offline UI brought in without offline.js");c='<div class="offline-ui"><div class="offline-ui-content"></div></div>',b='<a href class="offline-ui-retry"></a>',a='<a href class="offline-ui-cancel"></a>',g=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},h=f=null,e=function(a){return l(a),h.className+=" "+a},l=function(a){return h.className=h.className.replace(new RegExp("(^| )"+a.split(" ").join("|")+"( |$)","gi")," ")},j={},i=function(a,b){return e(a),null!=j[a]&&clearTimeout(j[a]),j[a]=setTimeout(function(){return l(a),delete j[a]},1e3*b)},n=function(a){var b,c,d,e;d={day:86400,hour:3600,minute:60,second:1};for(c in d)if(b=d[c],a>=b)return e=Math.floor(a/b),[e,c];return["now",""]},m=function(){var d,i,j,k;return h=g(c),document.body.appendChild(h),null!=Offline.reconnect&&Offline.getOption("reconnect")&&(Offline.getOption("reconnect.cancel")&&(h.appendChild(g(a)),i=h.querySelector(".offline-ui-cancel"),j=function(a){return a.preventDefault(),Offline.reconnect.cancel()},null!=i.addEventListener?i.addEventListener("click",j,!1):i.attachEvent("click",j),h.appendChild(g(b))),d=h.querySelector(".offline-ui-retry"),k=function(a){return a.preventDefault(),Offline.reconnect.tryNow()},null!=d.addEventListener?d.addEventListener("click",k,!1):d.attachEvent("click",k)),e("offline-ui-"+Offline.state),f=h.querySelector(".offline-ui-content")},k=function(){return m(),Offline.on("up",function(){return l("offline-ui-down"),e("offline-ui-up"),i("offline-ui-up-2s",2),i("offline-ui-up-5s",5)}),Offline.on("down",function(){return l("offline-ui-up"),e("offline-ui-down"),i("offline-ui-down-2s",2),i("offline-ui-down-5s",5)}),Offline.on("reconnect:started",function(){return l("offline-ui-reconnect-canceled")}),Offline.on("reconnect:connecting",function(){return e("offline-ui-connecting"),l("offline-ui-waiting")}),Offline.on("reconnect:tick",function(){var a,b,c;return e("offline-ui-waiting"),l("offline-ui-connecting"),a=n(Offline.reconnect.remaining),b=a[0],c=a[1],f.setAttribute("data-retry-in-value",b),f.setAttribute("data-retry-in-unit",c)}),Offline.on("reconnect:stopped",function(){return l("offline-ui-connecting offline-ui-waiting"),f.setAttribute("data-retry-in-value",null),f.setAttribute("data-retry-in-unit",null)}),Offline.on("reconnect:canceled",function(){return e("offline-ui-reconnect-canceled")}),Offline.on("reconnect:failure",function(){return i("offline-ui-reconnect-failed-2s",2),i("offline-ui-reconnect-failed-5s",5)}),Offline.on("reconnect:success",function(){return i("offline-ui-reconnect-succeeded-2s",2),i("offline-ui-reconnect-succeeded-5s",5)})},"complete"===document.readyState?k():null!=document.addEventListener?document.addEventListener("DOMContentLoaded",k,!1):(d=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&k(),"function"==typeof d?d.apply(null,arguments):void 0})}.call(this);
\ No newline at end of file
diff --git a/package.json b/package.json
index 3f64d39..c41518a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "devDependencies": {
     "coffee-script": "^1.9.3",
     "color": "^0.9.0",
+    "compass": "^0.1.1",
     "grunt": "^0.4.1",
     "grunt-cli": "^0.1.9",
     "grunt-contrib-coffee": "^0.13.0",
diff --git a/sass/_offline-theme-base.sass b/sass/_offline-theme-base.sass
index 1e3433c..27d244e 100644
--- a/sass/_offline-theme-base.sass
+++ b/sass/_offline-theme-base.sass
@@ -2,42 +2,71 @@
 @import compass/css3/user-interface
 
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after
-    +box-sizing(border-box)
+  +box-sizing(border-box)
 
 .offline-ui
+  display: none
+  position: fixed
+  background: #fff
+  z-index: 2000
+  margin: auto
+  top: 0
+  left: 0
+  right: 0
+
+  .offline-ui-content:before
+    display: inline
+
+  .offline-ui-cancel
+    position: relative
+    display: inline-block
+    width: 50px
+    height: 50px
+    overflow: hidden
+
+    &::before, &::after
+      content: ""
+      position: absolute
+      height: 1px
+      width: 14px
+      top: 50%
+      left: 50%
+      margin-left: -7px
+      border-radius: 2px
+
+    &::before
+      @include transform(rotate(45deg))
+
+    &::after
+      @include transform(rotate(-45deg))
+
+  .offline-ui-retry, .offline-ui-cancel
+    +user-select(none)
     display: none
-    position: fixed
-    background: #fff
-    z-index: 2000
-    margin: auto
-    top: 0
-    left: 0
-    right: 0
-
-    .offline-ui-content:before
-        display: inline
-
-    .offline-ui-retry
-        +user-select(none)
-        display: none
 
-        &:before
-            display: inline
+    &:before
+      display: inline
+
+  &.offline-ui-up
+
+    &.offline-ui-up-5s
+      display: block
 
-    &.offline-ui-up
+  &.offline-ui-down
+    display: block
 
-        &.offline-ui-up-5s
-            display: block
+    &.offline-ui-waiting
 
-    &.offline-ui-down
+      .offline-ui-retry, .offline-ui-cancel
         display: block
 
-        &.offline-ui-waiting
+    &.offline-ui-reconnect-canceled
 
-            .offline-ui-retry
-                display: block
+      .offline-ui-retry
+        display: block
+        right: 1em
 
-        &.offline-ui-reconnect-failed-2s
+    &.offline-ui-reconnect-failed-2s
 
-            &.offline-ui-waiting .offline-ui-retry
-                display: none
+      &.offline-ui-waiting .offline-ui-retry, &.offline-ui-waiting .offline-ui-cancel
+        display: none
diff --git a/sass/offline-theme-chrome.sass b/sass/offline-theme-chrome.sass
index 6b36752..9c39111 100644
--- a/sass/offline-theme-chrome.sass
+++ b/sass/offline-theme-chrome.sass
@@ -14,89 +14,100 @@ $red: #ec8787
 +keyframes-offline-rotation
 
 .offline-ui
-    +box-shadow(0 0 0 1px rgba(0, 0, 0, .15), 0 0 1em rgba(0, 0, 0, .3))
-    font-family: "Lucida Grande", sans-serif
-    font-size: 14px
-    padding: 1em
-    width: 38em
-    max-width: 100%
-    background: #f6f6f6
-    color: #444
-    overflow: hidden
-
-    .offline-ui-content
-        padding-left: 2em
-
-        &:before
-            line-height: 1.25em
-
-        &:after
-            +border-radius(50%)
-            content: " "
-            display: block
-            position: absolute
-            top: 0
-            bottom: 0
-            left: 1em
-            margin: auto
-            height: 1em
-            width: 1em
-
-    .offline-ui-retry
-        +box-shadow(0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75))
-        +border-radius(2px)
-        +background-image(linear-gradient(#ededed, #ededed 38%, #dedede))
+  +box-shadow(0 0 0 1px rgba(0, 0, 0, .15), 0 0 1em rgba(0, 0, 0, .3))
+  font-family: "Lucida Grande", sans-serif
+  font-size: 14px
+  padding: 1em
+  width: 42em
+  max-width: 100%
+  background: #f6f6f6
+  color: #444
+  overflow: hidden
+
+  .offline-ui-content
+    padding-left: 2em
+
+    &:before
+      line-height: 1.25em
+
+    &:after
+      +border-radius(50%)
+      content: " "
+      display: block
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 1em
+      margin: auto
+      height: 1em
+      width: 1em
+
+  .offline-ui-retry, .offline-ui-cancel
+    +box-shadow(0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75))
+    +border-radius(2px)
+    +background-image(linear-gradient(#ededed, #ededed 38%, #dedede))
+    position: absolute
+    top: 1em
+    bottom: 1em
+    border: 1px solid rgba(0, 0, 0, 0.25)
+    text-shadow: 0 1px 0 #f0f0f0
+    padding: 0 1em
+    line-height: 1.6em
+    height: 1.7em
+    margin: auto
+    font-size: 12px
+    text-decoration: none
+    color: inherit
+
+  .offline-ui-cancel
+    right: 3em
+    padding: 0
+    &::before, &::after
+      background: #444
+
+  .offline-ui-retry
+    right: 8em
+
+  &.offline-ui-up
+    +offline-animation(offline-dropout forwards .5s 2s)
+
+    .offline-ui-content:after
+      background: $green
+
+  &.offline-ui-down
+    +offline-animation(offline-dropin .5s)
+
+    .offline-ui-content:after
+      background: $red
+
+    &.offline-ui-connecting, &.offline-ui-waiting
+      padding-right: 3em
+
+      .offline-ui-content:after
+        background: $red
+
+      &:after
+        +offline-animation(offline-rotation .7s linear infinite)
+        +border-radius(50%)
+        content: " "
+        display: block
         position: absolute
-        right: 4em
-        top: 1em
-        bottom: 1em
-        border: 1px solid rgba(0, 0, 0, 0.25)
-        text-shadow: 0 1px 0 #f0f0f0
-        padding: 0 1em
-        line-height: 1.6em
-        height: 1.7em
+        right: 1em
+        top: 0
+        bottom: 0
         margin: auto
-        font-size: 12px
-        text-decoration: none
-        color: inherit
-
-    &.offline-ui-up
-        +offline-animation(offline-dropout forwards .5s 2s)
-
-        .offline-ui-content:after
-            background: $green
-
-    &.offline-ui-down
-        +offline-animation(offline-dropin .5s)
-
-        .offline-ui-content:after
-            background: $red
-
-        &.offline-ui-connecting, &.offline-ui-waiting
-            padding-right: 3em
-
-            .offline-ui-content:after
-                background: $red
-
-            &:after
-                +offline-animation(offline-rotation .7s linear infinite)
-                +border-radius(50%)
-                content: " "
-                display: block
-                position: absolute
-                right: 1em
-                top: 0
-                bottom: 0
-                margin: auto
-                height: 1em
-                width: 1em
-                border: 2px solid rgba(0, 0, 0, 0)
-                border-top-color: rgba(0, 0, 0, .5)
-                border-left-color: rgba(0, 0, 0, .5)
-                opacity: 0.7
-
-        &.offline-ui-waiting
-            padding-right: 11em
-
-            &.offline-ui-reconnect-failed-2s
-                padding-right: 0
\ No newline at end of file
+        height: 1em
+        width: 1em
+        border: 2px solid rgba(0, 0, 0, 0)
+        border-top-color: rgba(0, 0, 0, .5)
+        border-left-color: rgba(0, 0, 0, .5)
+        opacity: 0.7
+
+    &.offline-ui-waiting
+      padding-right: 15em
+
+      &.offline-ui-reconnect-failed-2s
+        padding-right: 0
+
+    &.offline-ui-reconnect-canceled
+      padding-right: 11em
\ No newline at end of file
diff --git a/sass/offline-theme-dark.sass b/sass/offline-theme-dark.sass
index f0adb5a..295b120 100644
--- a/sass/offline-theme-dark.sass
+++ b/sass/offline-theme-dark.sass
@@ -14,87 +14,99 @@ $red: #e24949
 +keyframes-offline-rotation
 
 .offline-ui
-    +border-radius(0 0 4px 4px)
-    font-family: "Helvetica Neue", sans-serif
-    font-weight: 300
-    padding: 1em
-    width: 38em
-    max-width: 100%
-    background: #000
-    color: #ccc
-    overflow: hidden
-
-    @media (max-width: 38em)
-        +border-radius(0)
-
-    .offline-ui-content
-        padding-left: 2em
-
-        &:before
-            line-height: 1.25em
-
-        &:after
-            +border-radius(50%)
-            content: " "
-            display: block
-            position: absolute
-            top: 0
-            bottom: 0
-            left: 1em
-            margin: auto
-            height: 1em
-            width: 1em
-
-    .offline-ui-retry
+  +border-radius(0 0 4px 4px)
+  font-family: "Helvetica Neue", sans-serif
+  font-weight: 300
+  padding: 1em
+  width: 42em
+  max-width: 100%
+  background: #000
+  color: #ccc
+  overflow: hidden
+
+  @media (max-width: 38em)
+    +border-radius(0)
+
+  .offline-ui-content
+    padding-left: 2em
+
+    &:before
+      line-height: 1.25em
+
+    &:after
+      +border-radius(50%)
+      content: " "
+      display: block
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 1em
+      margin: auto
+      height: 1em
+      width: 1em
+
+  .offline-ui-retry, .offline-ui-cancel
+    position: absolute
+    top: 0
+    bottom: 0
+    background: rgba(255, 255, 255, .2)
+    text-decoration: none
+    color: inherit
+    line-height: 3.5em
+    height: 3.5em
+    margin: auto
+    padding: 0 1em
+
+  .offline-ui-cancel
+    right: 3em
+    &::before, &::after
+      background: #ccc
+
+  .offline-ui-retry
+    right: 7em
+
+  &.offline-ui-up
+    +offline-animation(offline-dropout forwards .5s 2s)
+
+    .offline-ui-content:after
+      background: $green
+
+  &.offline-ui-down
+    +offline-animation(offline-dropin .5s)
+
+    .offline-ui-content:after
+      background: $red
+
+    &.offline-ui-connecting, &.offline-ui-waiting
+      padding-right: 3em
+
+      .offline-ui-content:after
+        background: $red
+
+      &:after
+        +offline-animation(offline-rotation .7s linear infinite)
+        +border-radius(50%)
+        content: " "
+        display: block
         position: absolute
-        right: 3em
+        right: 1em
         top: 0
         bottom: 0
-        background: rgba(255, 255, 255, .2)
-        text-decoration: none
-        color: inherit
-        line-height: 3.5em
-        height: 3.5em
         margin: auto
-        padding: 0 1em
-
-    &.offline-ui-up
-        +offline-animation(offline-dropout forwards .5s 2s)
-
-        .offline-ui-content:after
-            background: $green
-
-    &.offline-ui-down
-        +offline-animation(offline-dropin .5s)
-
-        .offline-ui-content:after
-            background: $red
-
-        &.offline-ui-connecting, &.offline-ui-waiting
-            padding-right: 3em
-
-            .offline-ui-content:after
-                background: $red
-
-            &:after
-                +offline-animation(offline-rotation .7s linear infinite)
-                +border-radius(50%)
-                content: " "
-                display: block
-                position: absolute
-                right: 1em
-                top: 0
-                bottom: 0
-                margin: auto
-                height: 1em
-                width: 1em
-                border: 2px solid transparent
-                border-top-color: rgba(255, 255, 255, .5)
-                border-left-color: rgba(255, 255, 255, .5)
-                opacity: 0.7
-
-        &.offline-ui-waiting
-            padding-right: 11em
-
-            &.offline-ui-reconnect-failed-2s
-                padding-right: 0
+        height: 1em
+        width: 1em
+        border: 2px solid transparent
+        border-top-color: rgba(255, 255, 255, .5)
+        border-left-color: rgba(255, 255, 255, .5)
+        opacity: 0.7
+
+    &.offline-ui-waiting
+      padding-right: 15em
+
+      &.offline-ui-reconnect-failed-2s
+        padding-right: 0
+
+    &.offline-ui-reconnect-canceled
+      padding-right: 10em
+      .offline-ui-retry
+        right: 0
diff --git a/sass/offline-theme-default.sass b/sass/offline-theme-default.sass
index 3035e88..23ffc58 100644
--- a/sass/offline-theme-default.sass
+++ b/sass/offline-theme-default.sass
@@ -19,68 +19,81 @@ $darkYellow: #7c6d1f
 +keyframes-offline-rotation
 
 .offline-ui
-    +border-radius(4px)
-    font-family: "Helvetica Neue", sans-serif
-    padding: 1em
-    top: 1em
-    width: 38em
-    max-width: 100%
-    overflow: hidden
-
-    @media (max-width: 38em)
-        +border-radius(0)
-        top: 0
-
-    .offline-ui-content:before
-        line-height: 1.25em
-
-    .offline-ui-retry
+  +border-radius(4px)
+  font-family: "Helvetica Neue", sans-serif
+  padding: 1em
+  top: 1em
+  width: 42em
+  max-width: 100%
+  overflow: hidden
+
+  @media (max-width: 38em)
+    +border-radius(0)
+    top: 0
+
+  .offline-ui-content:before
+    line-height: 1.25em
+
+  .offline-ui-retry, .offline-ui-cancel
+    position: absolute
+    right: 3em
+    top: 0
+    bottom: 0
+    background: rgba(0, 0, 0, .1)
+    text-decoration: none
+    color: inherit
+    line-height: 3.5em
+    height: 3.5em
+    margin: auto
+    padding: 0 1em
+
+  .offline-ui-cancel
+    right: 3em
+    &::before, &::after
+      background: #7c6d1f
+
+  .offline-ui-retry
+    right: 7em
+
+  &.offline-ui-up
+    +offline-animation(offline-fadeout-and-hide forwards .5s 2s)
+    background: $green
+    color: $darkGreen
+
+  &.offline-ui-down
+    +offline-animation(offline-fadein .5s)
+    background: $red
+    color: $darkRed
+
+    &.offline-ui-connecting, &.offline-ui-waiting
+      background: $yellow
+      color: $darkYellow
+      padding-right: 3em
+
+      &:after
+        +offline-animation(offline-rotation .7s linear infinite)
+        +border-radius(50%)
+        content: " "
+        display: block
         position: absolute
-        right: 3em
+        right: 1em
         top: 0
         bottom: 0
-        background: rgba(0, 0, 0, .1)
-        text-decoration: none
-        color: inherit
-        line-height: 3.5em
-        height: 3.5em
         margin: auto
-        padding: 0 1em
-
-    &.offline-ui-up
-        +offline-animation(offline-fadeout-and-hide forwards .5s 2s)
-        background: $green
-        color: $darkGreen
-
-    &.offline-ui-down
-        +offline-animation(offline-fadein .5s)
-        background: $red
-        color: $darkRed
-
-        &.offline-ui-connecting, &.offline-ui-waiting
-            background: $yellow
-            color: $darkYellow
-            padding-right: 3em
-
-            &:after
-                +offline-animation(offline-rotation .7s linear infinite)
-                +border-radius(50%)
-                content: " "
-                display: block
-                position: absolute
-                right: 1em
-                top: 0
-                bottom: 0
-                margin: auto
-                height: 1em
-                width: 1em
-                border: 2px solid rgba(0, 0, 0, 0)
-                border-top-color: $darkYellow
-                border-left-color: $darkYellow
-                opacity: 0.7
-
-        &.offline-ui-waiting
-            padding-right: 11em
-
-            &.offline-ui-reconnect-failed-2s
-                padding-right: 0
+        height: 1em
+        width: 1em
+        border: 2px solid rgba(0, 0, 0, 0)
+        border-top-color: $darkYellow
+        border-left-color: $darkYellow
+        opacity: 0.7
+
+    &.offline-ui-waiting
+      padding-right: 15em
+
+      &.offline-ui-reconnect-failed-2s
+        padding-right: 0
+
+    &.offline-ui-reconnect-canceled
+      padding-right: 10em
+      .offline-ui-retry
+        right: 0
\ No newline at end of file
diff --git a/sass/offline-theme-slide.sass b/sass/offline-theme-slide.sass
index 97ac513..59fbc15 100644
--- a/sass/offline-theme-slide.sass
+++ b/sass/offline-theme-slide.sass
@@ -19,63 +19,75 @@ $darkYellow: #7c6d1f
 +keyframes-offline-rotation
 
 .offline-ui
-    +border-radius(0 0 4px 4px)
-    font-family: "Helvetica Neue", sans-serif
-    padding: 1em
-    width: 38em
-    max-width: 100%
-    overflow: hidden
+  +border-radius(0 0 4px 4px)
+  font-family: "Helvetica Neue", sans-serif
+  padding: 1em
+  width: 42em
+  max-width: 100%
+  overflow: hidden
 
-    @media (max-width: 38em)
-        +border-radius(0)
+  @media (max-width: 38em)
+    +border-radius(0)
 
-    .offline-ui-retry
+  .offline-ui-retry, .offline-ui-cancel
+    position: absolute
+    top: 0
+    bottom: 0
+    background: rgba(0, 0, 0, .1)
+    text-decoration: none
+    color: inherit
+    line-height: 3.5em
+    height: 3.5em
+    margin: auto
+    padding: 0 1em
+
+  .offline-ui-cancel
+    right: 3em
+    &::before, &::after
+      background: #7c6d1f
+
+  .offline-ui-retry
+    right: 7em
+
+  &.offline-ui-up
+    +offline-animation(offline-dropout forwards .5s 2s)
+    background: $green
+    color: $darkGreen
+
+  &.offline-ui-down
+    +offline-animation(offline-dropin .5s)
+    background: $red
+    color: $darkRed
+
+    &.offline-ui-connecting, &.offline-ui-waiting
+      background: $yellow
+      color: $darkYellow
+      padding-right: 3em
+
+      &:after
+        +offline-animation(offline-rotation .7s linear infinite)
+        +border-radius(50%)
+        content: " "
+        display: block
         position: absolute
-        right: 3em
+        right: 1em
         top: 0
         bottom: 0
-        background: rgba(0, 0, 0, .1)
-        text-decoration: none
-        color: inherit
-        line-height: 3.5em
-        height: 3.5em
         margin: auto
-        padding: 0 1em
-
-    &.offline-ui-up
-        +offline-animation(offline-dropout forwards .5s 2s)
-        background: $green
-        color: $darkGreen
-
-    &.offline-ui-down
-        +offline-animation(offline-dropin .5s)
-        background: $red
-        color: $darkRed
-
-        &.offline-ui-connecting, &.offline-ui-waiting
-            background: $yellow
-            color: $darkYellow
-            padding-right: 3em
-
-            &:after
-                +offline-animation(offline-rotation .7s linear infinite)
-                +border-radius(50%)
-                content: " "
-                display: block
-                position: absolute
-                right: 1em
-                top: 0
-                bottom: 0
-                margin: auto
-                height: 1em
-                width: 1em
-                border: 2px solid rgba(0, 0, 0, 0)
-                border-top-color: $darkYellow
-                border-left-color: $darkYellow
-                opacity: 0.7
-
-        &.offline-ui-waiting
-            padding-right: 11em
-
-            &.offline-ui-reconnect-failed-2s
-                padding-right: 0
+        height: 1em
+        width: 1em
+        border: 2px solid rgba(0, 0, 0, 0)
+        border-top-color: $darkYellow
+        border-left-color: $darkYellow
+        opacity: 0.7
+
+    &.offline-ui-waiting
+      padding-right: 15em
+
+      &.offline-ui-reconnect-failed-2s
+        padding-right: 0
+
+    &.offline-ui-reconnect-canceled
+      padding-right: 10em
+      .offline-ui-retry
+        right: 0
\ No newline at end of file
diff --git a/themes/offline-language-french.css b/themes/offline-language-french.css
index 88b0069..6145db5 100644
--- a/themes/offline-language-french.css
+++ b/themes/offline-language-french.css
@@ -106,4 +106,4 @@
 /* line 93, ../sass/_content.sass */
 .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before {
   content: "La tentative de connexion a échoué.";
-}
\ No newline at end of file
+}
diff --git a/themes/offline-language-german.css b/themes/offline-language-german.css
index 36dcd46..90f46c3 100644
--- a/themes/offline-language-german.css
+++ b/themes/offline-language-german.css
@@ -10,7 +10,7 @@
 @media (max-width: 1024px) {
   /* line 11, ../sass/_content.sass */
   .offline-ui.offline-ui-up .offline-ui-content:before {
-    content: "Dein Gerät ist mit dem Internet verbunden.";
+    content: "Deing Gerät ist mit dem Internet verbunden.";
   }
 }
 @media (max-width: 568px) {
diff --git a/themes/offline-theme-chrome-indicator.css b/themes/offline-theme-chrome-indicator.css
index 268429a..48b3c2e 100644
--- a/themes/offline-theme-chrome-indicator.css
+++ b/themes/offline-theme-chrome-indicator.css
@@ -1,7 +1,7 @@
 /* line 3, ../sass/_offline-theme-base-indicator.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   display: inline-block;
 }
@@ -28,19 +28,17 @@
 
 /* line 8, ../sass/offline-theme-chrome-indicator.sass */
 .offline-ui {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
-  -ms-border-radius: 4px 4px 0 0;
-  -o-border-radius: 4px 4px 0 0;
+  -webkit-border-radius: 4px;
   border-radius: 4px 4px 0 0;
   font-family: "Lucida Grande", sans-serif;
   font-size: 12px;
   padding: 7px;
   background: #f6f6f6;
-  color: #888888;
+  color: #888;
   bottom: 0;
   left: 20px;
 }
@@ -50,10 +48,8 @@
 }
 /* line 22, ../sass/offline-theme-chrome-indicator.sass */
 .offline-ui .offline-ui-content:after {
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
diff --git a/themes/offline-theme-chrome.css b/themes/offline-theme-chrome.css
index 3516cca..51e2620 100644
--- a/themes/offline-theme-chrome.css
+++ b/themes/offline-theme-chrome.css
@@ -1,7 +1,7 @@
 /* line 4, ../sass/_offline-theme-base.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   margin: auto;
   top: 0;
@@ -21,35 +21,73 @@
   display: inline;
 }
 /* line 20, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-cancel {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+/* line 27, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  content: "";
+  position: absolute;
+  height: 1px;
+  width: 14px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  border-radius: 2px;
+}
+/* line 37, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before {
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/* line 40, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::after {
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* line 43, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   display: none;
 }
-/* line 24, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry:before {
+/* line 47, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry:before, .offline-ui .offline-ui-cancel:before {
   display: inline;
 }
-/* line 29, ../sass/_offline-theme-base.sass */
+/* line 52, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-up.offline-ui-up-5s {
   display: block;
 }
-/* line 32, ../sass/_offline-theme-base.sass */
+/* line 55, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-down {
   display: block;
 }
-/* line 37, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
+/* line 60, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-cancel {
   display: block;
 }
-/* line 42, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
+/* line 65, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  display: block;
+  right: 1em;
+}
+/* line 71, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-cancel {
   display: none;
 }
 
 @-webkit-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -58,8 +96,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -68,8 +104,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -78,8 +112,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -89,9 +121,7 @@
     opacity: 1;
   }
 }
-
 @-moz-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -100,8 +130,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -110,8 +138,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -120,8 +146,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -131,9 +155,7 @@
     opacity: 1;
   }
 }
-
 @-ms-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -142,8 +164,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -152,8 +172,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -162,8 +180,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -173,9 +189,7 @@
     opacity: 1;
   }
 }
-
 @-o-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -184,8 +198,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -194,8 +206,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -204,8 +214,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -215,9 +223,7 @@
     opacity: 1;
   }
 }
-
 @keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -226,8 +232,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -236,8 +240,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -246,8 +248,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -257,9 +257,7 @@
     opacity: 1;
   }
 }
-
 @-webkit-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -267,8 +265,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -277,9 +273,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-moz-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -287,8 +281,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -297,9 +289,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-ms-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -307,8 +297,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -317,9 +305,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-o-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -327,8 +313,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -337,9 +321,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -347,8 +329,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -357,9 +337,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-webkit-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -367,8 +345,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -377,9 +353,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-moz-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -387,8 +361,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -397,9 +369,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-ms-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -407,8 +377,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -417,9 +385,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-o-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -427,8 +393,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -437,9 +401,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -447,8 +409,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -457,19 +417,18 @@
     -o-transform: rotate(359deg);
   }
 }
-
 /* line 16, ../sass/offline-theme-chrome.sass */
 .offline-ui {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3);
   font-family: "Lucida Grande", sans-serif;
   font-size: 14px;
   padding: 1em;
-  width: 38em;
+  width: 42em;
   max-width: 100%;
   background: #f6f6f6;
-  color: #444444;
+  color: #444;
   overflow: hidden;
 }
 /* line 27, ../sass/offline-theme-chrome.sass */
@@ -482,10 +441,8 @@
 }
 /* line 33, ../sass/offline-theme-chrome.sass */
 .offline-ui .offline-ui-content:after {
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -498,22 +455,20 @@
   width: 1em;
 }
 /* line 45, ../sass/offline-theme-chrome.sass */
-.offline-ui .offline-ui-retry {
-  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
-  -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIvPjxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjZWRlZGVkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGVkZWRlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-size: 100%;
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(38%, #ededed), color-stop(100%, #dedede));
-  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-image: -moz-linear-gradient(#ededed, #ededed 38%, #dedede);
-  background-image: -o-linear-gradient(#ededed, #ededed 38%, #dedede);
+  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
   position: absolute;
-  right: 4em;
   top: 1em;
   bottom: 1em;
   border: 1px solid rgba(0, 0, 0, 0.25);
@@ -526,7 +481,20 @@
   text-decoration: none;
   color: inherit;
 }
-/* line 63, ../sass/offline-theme-chrome.sass */
+/* line 62, ../sass/offline-theme-chrome.sass */
+.offline-ui .offline-ui-cancel {
+  right: 3em;
+  padding: 0;
+}
+/* line 65, ../sass/offline-theme-chrome.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  background: #444;
+}
+/* line 68, ../sass/offline-theme-chrome.sass */
+.offline-ui .offline-ui-retry {
+  right: 8em;
+}
+/* line 71, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-up {
   -webkit-animation: offline-dropout forwards 0.5s 2s;
   -moz-animation: offline-dropout forwards 0.5s 2s;
@@ -535,11 +503,11 @@
   animation: offline-dropout forwards 0.5s 2s;
   -webkit-backface-visibility: hidden;
 }
-/* line 66, ../sass/offline-theme-chrome.sass */
+/* line 74, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-up .offline-ui-content:after {
   background: #80d580;
 }
-/* line 69, ../sass/offline-theme-chrome.sass */
+/* line 77, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down {
   -webkit-animation: offline-dropin 0.5s;
   -moz-animation: offline-dropin 0.5s;
@@ -548,19 +516,19 @@
   animation: offline-dropin 0.5s;
   -webkit-backface-visibility: hidden;
 }
-/* line 72, ../sass/offline-theme-chrome.sass */
+/* line 80, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down .offline-ui-content:after {
   background: #ec8787;
 }
-/* line 75, ../sass/offline-theme-chrome.sass */
+/* line 83, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
   padding-right: 3em;
 }
-/* line 78, ../sass/offline-theme-chrome.sass */
+/* line 86, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:after, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:after {
   background: #ec8787;
 }
-/* line 81, ../sass/offline-theme-chrome.sass */
+/* line 89, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
   -webkit-animation: offline-rotation 0.7s linear infinite;
   -moz-animation: offline-rotation 0.7s linear infinite;
@@ -568,10 +536,8 @@
   -o-animation: offline-rotation 0.7s linear infinite;
   animation: offline-rotation 0.7s linear infinite;
   -webkit-backface-visibility: hidden;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -582,16 +548,20 @@
   margin: auto;
   height: 1em;
   width: 1em;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   border-top-color: rgba(0, 0, 0, 0.5);
   border-left-color: rgba(0, 0, 0, 0.5);
   opacity: 0.7;
 }
-/* line 98, ../sass/offline-theme-chrome.sass */
+/* line 106, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting {
-  padding-right: 11em;
+  padding-right: 15em;
 }
-/* line 101, ../sass/offline-theme-chrome.sass */
+/* line 109, ../sass/offline-theme-chrome.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
   padding-right: 0;
 }
+/* line 112, ../sass/offline-theme-chrome.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled {
+  padding-right: 11em;
+}
diff --git a/themes/offline-theme-dark-indicator.css b/themes/offline-theme-dark-indicator.css
index f293c51..1bc9072 100644
--- a/themes/offline-theme-dark-indicator.css
+++ b/themes/offline-theme-dark-indicator.css
@@ -1,7 +1,7 @@
 /* line 3, ../sass/_offline-theme-base-indicator.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   display: inline-block;
 }
@@ -28,19 +28,17 @@
 
 /* line 8, ../sass/offline-theme-dark-indicator.sass */
 .offline-ui {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
-  -ms-border-radius: 4px 4px 0 0;
-  -o-border-radius: 4px 4px 0 0;
+  -webkit-border-radius: 4px;
   border-radius: 4px 4px 0 0;
   font-family: "Helvetica Neue", sans-serif;
   font-weight: 300;
   padding: 1em;
-  background: black;
-  color: #cccccc;
+  background: #000;
+  color: #ccc;
   bottom: 0;
   left: 20px;
 }
@@ -50,10 +48,8 @@
 }
 /* line 22, ../sass/offline-theme-dark-indicator.sass */
 .offline-ui .offline-ui-content:after {
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
diff --git a/themes/offline-theme-dark.css b/themes/offline-theme-dark.css
index 6d28efa..1232a19 100644
--- a/themes/offline-theme-dark.css
+++ b/themes/offline-theme-dark.css
@@ -1,7 +1,7 @@
 /* line 4, ../sass/_offline-theme-base.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   margin: auto;
   top: 0;
@@ -21,35 +21,73 @@
   display: inline;
 }
 /* line 20, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-cancel {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+/* line 27, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  content: "";
+  position: absolute;
+  height: 1px;
+  width: 14px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  border-radius: 2px;
+}
+/* line 37, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before {
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/* line 40, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::after {
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* line 43, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   display: none;
 }
-/* line 24, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry:before {
+/* line 47, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry:before, .offline-ui .offline-ui-cancel:before {
   display: inline;
 }
-/* line 29, ../sass/_offline-theme-base.sass */
+/* line 52, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-up.offline-ui-up-5s {
   display: block;
 }
-/* line 32, ../sass/_offline-theme-base.sass */
+/* line 55, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-down {
   display: block;
 }
-/* line 37, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
+/* line 60, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-cancel {
   display: block;
 }
-/* line 42, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
+/* line 65, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  display: block;
+  right: 1em;
+}
+/* line 71, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-cancel {
   display: none;
 }
 
 @-webkit-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -58,8 +96,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -68,8 +104,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -78,8 +112,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -89,9 +121,7 @@
     opacity: 1;
   }
 }
-
 @-moz-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -100,8 +130,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -110,8 +138,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -120,8 +146,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -131,9 +155,7 @@
     opacity: 1;
   }
 }
-
 @-ms-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -142,8 +164,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -152,8 +172,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -162,8 +180,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -173,9 +189,7 @@
     opacity: 1;
   }
 }
-
 @-o-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -184,8 +198,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -194,8 +206,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -204,8 +214,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -215,9 +223,7 @@
     opacity: 1;
   }
 }
-
 @keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -226,8 +232,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -236,8 +240,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -246,8 +248,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -257,9 +257,7 @@
     opacity: 1;
   }
 }
-
 @-webkit-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -267,8 +265,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -277,9 +273,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-moz-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -287,8 +281,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -297,9 +289,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-ms-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -307,8 +297,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -317,9 +305,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-o-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -327,8 +313,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -337,9 +321,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -347,8 +329,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -357,9 +337,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-webkit-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -367,8 +345,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -377,9 +353,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-moz-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -387,8 +361,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -397,9 +369,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-ms-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -407,8 +377,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -417,9 +385,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-o-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -427,8 +393,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -437,9 +401,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -447,8 +409,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -457,30 +417,25 @@
     -o-transform: rotate(359deg);
   }
 }
-
 /* line 16, ../sass/offline-theme-dark.sass */
 .offline-ui {
-  -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
-  -ms-border-radius: 0 0 4px 4px;
-  -o-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0;
   border-radius: 0 0 4px 4px;
   font-family: "Helvetica Neue", sans-serif;
   font-weight: 300;
   padding: 1em;
-  width: 38em;
+  width: 42em;
   max-width: 100%;
-  background: black;
-  color: #cccccc;
+  background: #000;
+  color: #ccc;
   overflow: hidden;
 }
 @media (max-width: 38em) {
   /* line 16, ../sass/offline-theme-dark.sass */
   .offline-ui {
-    -webkit-border-radius: 0;
     -moz-border-radius: 0;
-    -ms-border-radius: 0;
-    -o-border-radius: 0;
+    -webkit-border-radius: 0;
     border-radius: 0;
   }
 }
@@ -494,10 +449,8 @@
 }
 /* line 36, ../sass/offline-theme-dark.sass */
 .offline-ui .offline-ui-content:after {
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -510,9 +463,8 @@
   width: 1em;
 }
 /* line 48, ../sass/offline-theme-dark.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
   position: absolute;
-  right: 3em;
   top: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.2);
@@ -523,7 +475,19 @@
   margin: auto;
   padding: 0 1em;
 }
-/* line 61, ../sass/offline-theme-dark.sass */
+/* line 60, ../sass/offline-theme-dark.sass */
+.offline-ui .offline-ui-cancel {
+  right: 3em;
+}
+/* line 62, ../sass/offline-theme-dark.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  background: #ccc;
+}
+/* line 65, ../sass/offline-theme-dark.sass */
+.offline-ui .offline-ui-retry {
+  right: 7em;
+}
+/* line 68, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-up {
   -webkit-animation: offline-dropout forwards 0.5s 2s;
   -moz-animation: offline-dropout forwards 0.5s 2s;
@@ -532,11 +496,11 @@
   animation: offline-dropout forwards 0.5s 2s;
   -webkit-backface-visibility: hidden;
 }
-/* line 64, ../sass/offline-theme-dark.sass */
+/* line 71, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-up .offline-ui-content:after {
   background: #80d580;
 }
-/* line 67, ../sass/offline-theme-dark.sass */
+/* line 74, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down {
   -webkit-animation: offline-dropin 0.5s;
   -moz-animation: offline-dropin 0.5s;
@@ -545,19 +509,19 @@
   animation: offline-dropin 0.5s;
   -webkit-backface-visibility: hidden;
 }
-/* line 70, ../sass/offline-theme-dark.sass */
+/* line 77, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down .offline-ui-content:after {
   background: #e24949;
 }
-/* line 73, ../sass/offline-theme-dark.sass */
+/* line 80, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
   padding-right: 3em;
 }
-/* line 76, ../sass/offline-theme-dark.sass */
+/* line 83, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:after, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:after {
   background: #e24949;
 }
-/* line 79, ../sass/offline-theme-dark.sass */
+/* line 86, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
   -webkit-animation: offline-rotation 0.7s linear infinite;
   -moz-animation: offline-rotation 0.7s linear infinite;
@@ -565,10 +529,8 @@
   -o-animation: offline-rotation 0.7s linear infinite;
   animation: offline-rotation 0.7s linear infinite;
   -webkit-backface-visibility: hidden;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -584,11 +546,19 @@
   border-left-color: rgba(255, 255, 255, 0.5);
   opacity: 0.7;
 }
-/* line 96, ../sass/offline-theme-dark.sass */
+/* line 103, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting {
-  padding-right: 11em;
+  padding-right: 15em;
 }
-/* line 99, ../sass/offline-theme-dark.sass */
+/* line 106, ../sass/offline-theme-dark.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
   padding-right: 0;
 }
+/* line 109, ../sass/offline-theme-dark.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled {
+  padding-right: 10em;
+}
+/* line 111, ../sass/offline-theme-dark.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  right: 0;
+}
diff --git a/themes/offline-theme-default-indicator.css b/themes/offline-theme-default-indicator.css
index e02739e..3cc491e 100644
--- a/themes/offline-theme-default-indicator.css
+++ b/themes/offline-theme-default-indicator.css
@@ -1,7 +1,7 @@
 /* line 3, ../sass/_offline-theme-base-indicator.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   display: inline-block;
 }
@@ -28,10 +28,8 @@
 
 /* line 11, ../sass/offline-theme-default-indicator.sass */
 .offline-ui {
-  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
+  -webkit-border-radius: 4px;
   border-radius: 4px;
   font-family: "Helvetica Neue", sans-serif;
   padding: 1em;
diff --git a/themes/offline-theme-default.css b/themes/offline-theme-default.css
index 4946a0b..0e4030b 100644
--- a/themes/offline-theme-default.css
+++ b/themes/offline-theme-default.css
@@ -1,7 +1,7 @@
 /* line 4, ../sass/_offline-theme-base.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   margin: auto;
   top: 0;
@@ -21,195 +21,183 @@
   display: inline;
 }
 /* line 20, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-cancel {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+/* line 27, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  content: "";
+  position: absolute;
+  height: 1px;
+  width: 14px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  border-radius: 2px;
+}
+/* line 37, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before {
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/* line 40, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::after {
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* line 43, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   display: none;
 }
-/* line 24, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry:before {
+/* line 47, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry:before, .offline-ui .offline-ui-cancel:before {
   display: inline;
 }
-/* line 29, ../sass/_offline-theme-base.sass */
+/* line 52, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-up.offline-ui-up-5s {
   display: block;
 }
-/* line 32, ../sass/_offline-theme-base.sass */
+/* line 55, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-down {
   display: block;
 }
-/* line 37, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
+/* line 60, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-cancel {
+  display: block;
+}
+/* line 65, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
   display: block;
+  right: 1em;
 }
-/* line 42, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
+/* line 71, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-cancel {
   display: none;
 }
 
 @-webkit-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-moz-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-ms-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-o-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-webkit-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-moz-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-ms-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-o-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-webkit-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -217,8 +205,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -227,9 +213,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-moz-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -237,8 +221,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -247,9 +229,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-ms-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -257,8 +237,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -267,9 +245,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-o-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -277,8 +253,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -287,9 +261,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -297,8 +269,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -307,28 +277,23 @@
     -o-transform: rotate(359deg);
   }
 }
-
 /* line 21, ../sass/offline-theme-default.sass */
 .offline-ui {
-  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
+  -webkit-border-radius: 4px;
   border-radius: 4px;
   font-family: "Helvetica Neue", sans-serif;
   padding: 1em;
   top: 1em;
-  width: 38em;
+  width: 42em;
   max-width: 100%;
   overflow: hidden;
 }
 @media (max-width: 38em) {
   /* line 21, ../sass/offline-theme-default.sass */
   .offline-ui {
-    -webkit-border-radius: 0;
     -moz-border-radius: 0;
-    -ms-border-radius: 0;
-    -o-border-radius: 0;
+    -webkit-border-radius: 0;
     border-radius: 0;
     top: 0;
   }
@@ -338,7 +303,7 @@
   line-height: 1.25em;
 }
 /* line 37, ../sass/offline-theme-default.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
   position: absolute;
   right: 3em;
   top: 0;
@@ -352,6 +317,18 @@
   padding: 0 1em;
 }
 /* line 50, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-cancel {
+  right: 3em;
+}
+/* line 52, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  background: #7c6d1f;
+}
+/* line 55, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-retry {
+  right: 7em;
+}
+/* line 58, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-up {
   -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s;
   -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s;
@@ -362,7 +339,7 @@
   background: #d6e9c6;
   color: #468847;
 }
-/* line 55, ../sass/offline-theme-default.sass */
+/* line 63, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down {
   -webkit-animation: offline-fadein 0.5s;
   -moz-animation: offline-fadein 0.5s;
@@ -373,13 +350,13 @@
   background: #ec8787;
   color: #551313;
 }
-/* line 60, ../sass/offline-theme-default.sass */
+/* line 68, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
   background: #f8ecad;
   color: #7c6d1f;
   padding-right: 3em;
 }
-/* line 65, ../sass/offline-theme-default.sass */
+/* line 73, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
   -webkit-animation: offline-rotation 0.7s linear infinite;
   -moz-animation: offline-rotation 0.7s linear infinite;
@@ -387,10 +364,8 @@
   -o-animation: offline-rotation 0.7s linear infinite;
   animation: offline-rotation 0.7s linear infinite;
   -webkit-backface-visibility: hidden;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -401,16 +376,24 @@
   margin: auto;
   height: 1em;
   width: 1em;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   border-top-color: #7c6d1f;
   border-left-color: #7c6d1f;
   opacity: 0.7;
 }
-/* line 82, ../sass/offline-theme-default.sass */
+/* line 90, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting {
-  padding-right: 11em;
+  padding-right: 15em;
 }
-/* line 85, ../sass/offline-theme-default.sass */
+/* line 93, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
   padding-right: 0;
 }
+/* line 96, ../sass/offline-theme-default.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled {
+  padding-right: 10em;
+}
+/* line 98, ../sass/offline-theme-default.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  right: 0;
+}
diff --git a/themes/offline-theme-hubspot.css b/themes/offline-theme-hubspot.css
index d1ff9d7..24c7164 100644
--- a/themes/offline-theme-hubspot.css
+++ b/themes/offline-theme-hubspot.css
@@ -1,7 +1,7 @@
 /* line 4, ../sass/_offline-theme-base.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   margin: auto;
   top: 0;
@@ -21,195 +21,183 @@
   display: inline;
 }
 /* line 20, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-cancel {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+/* line 27, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  content: "";
+  position: absolute;
+  height: 1px;
+  width: 14px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  border-radius: 2px;
+}
+/* line 37, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before {
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/* line 40, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::after {
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* line 43, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   display: none;
 }
-/* line 24, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry:before {
+/* line 47, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry:before, .offline-ui .offline-ui-cancel:before {
   display: inline;
 }
-/* line 29, ../sass/_offline-theme-base.sass */
+/* line 52, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-up.offline-ui-up-5s {
   display: block;
 }
-/* line 32, ../sass/_offline-theme-base.sass */
+/* line 55, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-down {
   display: block;
 }
-/* line 37, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
+/* line 60, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-cancel {
   display: block;
 }
-/* line 42, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
+/* line 65, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  display: block;
+  right: 1em;
+}
+/* line 71, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-cancel {
   display: none;
 }
 
 @-webkit-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-moz-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-ms-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-o-keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @keyframes offline-fadein {
-  /* line 6, ../sass/_keyframes.sass */
   0% {
     opacity: 0;
   }
-
-  /* line 8, ../sass/_keyframes.sass */
   100% {
     opacity: 1;
   }
 }
-
 @-webkit-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-moz-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-ms-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-o-keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @keyframes offline-fadeout-and-hide {
-  /* line 20, ../sass/_keyframes.sass */
   0% {
     opacity: 1;
     display: block;
   }
-
-  /* line 23, ../sass/_keyframes.sass */
   99% {
     opacity: 0;
     display: block;
   }
-
-  /* line 26, ../sass/_keyframes.sass */
   100% {
     opacity: 0;
     display: none;
   }
 }
-
 @-webkit-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -217,8 +205,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -227,9 +213,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-moz-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -237,8 +221,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -247,9 +229,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-ms-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -257,8 +237,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -267,9 +245,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-o-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -277,8 +253,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -287,9 +261,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -297,8 +269,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -307,28 +277,23 @@
     -o-transform: rotate(359deg);
   }
 }
-
 /* line 21, ../sass/offline-theme-default.sass */
 .offline-ui {
-  -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -o-border-radius: 4px;
+  -webkit-border-radius: 4px;
   border-radius: 4px;
   font-family: "Helvetica Neue", sans-serif;
   padding: 1em;
   top: 1em;
-  width: 38em;
+  width: 42em;
   max-width: 100%;
   overflow: hidden;
 }
 @media (max-width: 38em) {
   /* line 21, ../sass/offline-theme-default.sass */
   .offline-ui {
-    -webkit-border-radius: 0;
     -moz-border-radius: 0;
-    -ms-border-radius: 0;
-    -o-border-radius: 0;
+    -webkit-border-radius: 0;
     border-radius: 0;
     top: 0;
   }
@@ -338,7 +303,7 @@
   line-height: 1.25em;
 }
 /* line 37, ../sass/offline-theme-default.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
   position: absolute;
   right: 3em;
   top: 0;
@@ -352,6 +317,18 @@
   padding: 0 1em;
 }
 /* line 50, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-cancel {
+  right: 3em;
+}
+/* line 52, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  background: #7c6d1f;
+}
+/* line 55, ../sass/offline-theme-default.sass */
+.offline-ui .offline-ui-retry {
+  right: 7em;
+}
+/* line 58, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-up {
   -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s;
   -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s;
@@ -362,7 +339,7 @@
   background: #d6e9c6;
   color: #468847;
 }
-/* line 55, ../sass/offline-theme-default.sass */
+/* line 63, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down {
   -webkit-animation: offline-fadein 0.5s;
   -moz-animation: offline-fadein 0.5s;
@@ -373,13 +350,13 @@
   background: #ec8787;
   color: #551313;
 }
-/* line 60, ../sass/offline-theme-default.sass */
+/* line 68, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
   background: #f8ecad;
   color: #7c6d1f;
   padding-right: 3em;
 }
-/* line 65, ../sass/offline-theme-default.sass */
+/* line 73, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
   -webkit-animation: offline-rotation 0.7s linear infinite;
   -moz-animation: offline-rotation 0.7s linear infinite;
@@ -387,10 +364,8 @@
   -o-animation: offline-rotation 0.7s linear infinite;
   animation: offline-rotation 0.7s linear infinite;
   -webkit-backface-visibility: hidden;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -401,29 +376,35 @@
   margin: auto;
   height: 1em;
   width: 1em;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   border-top-color: #7c6d1f;
   border-left-color: #7c6d1f;
   opacity: 0.7;
 }
-/* line 82, ../sass/offline-theme-default.sass */
+/* line 90, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting {
-  padding-right: 11em;
+  padding-right: 15em;
 }
-/* line 85, ../sass/offline-theme-default.sass */
+/* line 93, ../sass/offline-theme-default.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
   padding-right: 0;
 }
+/* line 96, ../sass/offline-theme-default.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled {
+  padding-right: 10em;
+}
+/* line 98, ../sass/offline-theme-default.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  right: 0;
+}
 
 /* line 5, ../sass/offline-theme-hubspot.sass */
 .offline-ui {
-  -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
-  -ms-border-radius: 0 0 4px 4px;
-  -o-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0;
   border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
   font-family: "Helvetica Neue", Helvetica, sans-serif, sans-serif;
   font-size: 13px;
diff --git a/themes/offline-theme-slide-indicator.css b/themes/offline-theme-slide-indicator.css
index 0fac96a..6ef0935 100644
--- a/themes/offline-theme-slide-indicator.css
+++ b/themes/offline-theme-slide-indicator.css
@@ -1,7 +1,7 @@
 /* line 3, ../sass/_offline-theme-base-indicator.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   display: inline-block;
 }
@@ -28,10 +28,8 @@
 
 /* line 11, ../sass/offline-theme-slide-indicator.sass */
 .offline-ui {
-  -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
-  -ms-border-radius: 4px 4px 0 0;
-  -o-border-radius: 4px 4px 0 0;
+  -webkit-border-radius: 4px;
   border-radius: 4px 4px 0 0;
   font-family: "Helvetica Neue", sans-serif;
   padding: 1em;
diff --git a/themes/offline-theme-slide.css b/themes/offline-theme-slide.css
index da9ec8f..12bf760 100644
--- a/themes/offline-theme-slide.css
+++ b/themes/offline-theme-slide.css
@@ -1,7 +1,7 @@
 /* line 4, ../sass/_offline-theme-base.sass */
 .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -9,7 +9,7 @@
 .offline-ui {
   display: none;
   position: fixed;
-  background: white;
+  background: #fff;
   z-index: 2000;
   margin: auto;
   top: 0;
@@ -21,35 +21,73 @@
   display: inline;
 }
 /* line 20, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-cancel {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+}
+/* line 27, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  content: "";
+  position: absolute;
+  height: 1px;
+  width: 14px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  border-radius: 2px;
+}
+/* line 37, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::before {
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+/* line 40, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-cancel::after {
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+/* line 43, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
   display: none;
 }
-/* line 24, ../sass/_offline-theme-base.sass */
-.offline-ui .offline-ui-retry:before {
+/* line 47, ../sass/_offline-theme-base.sass */
+.offline-ui .offline-ui-retry:before, .offline-ui .offline-ui-cancel:before {
   display: inline;
 }
-/* line 29, ../sass/_offline-theme-base.sass */
+/* line 52, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-up.offline-ui-up-5s {
   display: block;
 }
-/* line 32, ../sass/_offline-theme-base.sass */
+/* line 55, ../sass/_offline-theme-base.sass */
 .offline-ui.offline-ui-down {
   display: block;
 }
-/* line 37, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
+/* line 60, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-cancel {
   display: block;
 }
-/* line 42, ../sass/_offline-theme-base.sass */
-.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
+/* line 65, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  display: block;
+  right: 1em;
+}
+/* line 71, ../sass/_offline-theme-base.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry, .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-cancel {
   display: none;
 }
 
 @-webkit-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -58,8 +96,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -68,8 +104,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -78,8 +112,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -89,9 +121,7 @@
     opacity: 1;
   }
 }
-
 @-moz-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -100,8 +130,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -110,8 +138,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -120,8 +146,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -131,9 +155,7 @@
     opacity: 1;
   }
 }
-
 @-ms-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -142,8 +164,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -152,8 +172,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -162,8 +180,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -173,9 +189,7 @@
     opacity: 1;
   }
 }
-
 @-o-keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -184,8 +198,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -194,8 +206,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -204,8 +214,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -215,9 +223,7 @@
     opacity: 1;
   }
 }
-
 @keyframes offline-dropin {
-  /* line 40, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -226,8 +232,6 @@
     -o-transform: translateY(0);
     opacity: 0;
   }
-
-  /* line 43, ../sass/_keyframes.sass */
   1% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -236,8 +240,6 @@
     -o-transform: translateY(-800px);
     opacity: 0;
   }
-
-  /* line 48, ../sass/_keyframes.sass */
   2% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -246,8 +248,6 @@
     -o-transform: translateY(-800px);
     opacity: 1;
   }
-
-  /* line 51, ../sass/_keyframes.sass */
   100% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -257,9 +257,7 @@
     opacity: 1;
   }
 }
-
 @-webkit-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -267,8 +265,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -277,9 +273,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-moz-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -287,8 +281,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -297,9 +289,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-ms-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -307,8 +297,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -317,9 +305,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-o-keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -327,8 +313,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -337,9 +321,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @keyframes offline-dropout {
-  /* line 57, ../sass/_keyframes.sass */
   0% {
     transform: translateY(0);
     -webkit-transform: translateY(0);
@@ -347,8 +329,6 @@
     -ms-transform: translateY(0);
     -o-transform: translateY(0);
   }
-
-  /* line 59, ../sass/_keyframes.sass */
   100% {
     transform: translateY(-800px);
     -webkit-transform: translateY(-800px);
@@ -357,9 +337,7 @@
     -o-transform: translateY(-800px);
   }
 }
-
 @-webkit-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -367,8 +345,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -377,9 +353,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-moz-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -387,8 +361,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -397,9 +369,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-ms-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -407,8 +377,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -417,9 +385,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @-o-keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -427,8 +393,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -437,9 +401,7 @@
     -o-transform: rotate(359deg);
   }
 }
-
 @keyframes offline-rotation {
-  /* line 64, ../sass/_keyframes.sass */
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
@@ -447,8 +409,6 @@
     -ms-transform: rotate(0deg);
     -o-transform: rotate(0deg);
   }
-
-  /* line 66, ../sass/_keyframes.sass */
   100% {
     transform: rotate(359deg);
     -webkit-transform: rotate(359deg);
@@ -457,34 +417,28 @@
     -o-transform: rotate(359deg);
   }
 }
-
 /* line 21, ../sass/offline-theme-slide.sass */
 .offline-ui {
-  -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
-  -ms-border-radius: 0 0 4px 4px;
-  -o-border-radius: 0 0 4px 4px;
+  -webkit-border-radius: 0;
   border-radius: 0 0 4px 4px;
   font-family: "Helvetica Neue", sans-serif;
   padding: 1em;
-  width: 38em;
+  width: 42em;
   max-width: 100%;
   overflow: hidden;
 }
 @media (max-width: 38em) {
   /* line 21, ../sass/offline-theme-slide.sass */
   .offline-ui {
-    -webkit-border-radius: 0;
     -moz-border-radius: 0;
-    -ms-border-radius: 0;
-    -o-border-radius: 0;
+    -webkit-border-radius: 0;
     border-radius: 0;
   }
 }
 /* line 32, ../sass/offline-theme-slide.sass */
-.offline-ui .offline-ui-retry {
+.offline-ui .offline-ui-retry, .offline-ui .offline-ui-cancel {
   position: absolute;
-  right: 3em;
   top: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.1);
@@ -495,7 +449,19 @@
   margin: auto;
   padding: 0 1em;
 }
-/* line 45, ../sass/offline-theme-slide.sass */
+/* line 44, ../sass/offline-theme-slide.sass */
+.offline-ui .offline-ui-cancel {
+  right: 3em;
+}
+/* line 46, ../sass/offline-theme-slide.sass */
+.offline-ui .offline-ui-cancel::before, .offline-ui .offline-ui-cancel::after {
+  background: #7c6d1f;
+}
+/* line 49, ../sass/offline-theme-slide.sass */
+.offline-ui .offline-ui-retry {
+  right: 7em;
+}
+/* line 52, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-up {
   -webkit-animation: offline-dropout forwards 0.5s 2s;
   -moz-animation: offline-dropout forwards 0.5s 2s;
@@ -506,7 +472,7 @@
   background: #d6e9c6;
   color: #468847;
 }
-/* line 50, ../sass/offline-theme-slide.sass */
+/* line 57, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-down {
   -webkit-animation: offline-dropin 0.5s;
   -moz-animation: offline-dropin 0.5s;
@@ -517,13 +483,13 @@
   background: #ec8787;
   color: #551313;
 }
-/* line 55, ../sass/offline-theme-slide.sass */
+/* line 62, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting {
   background: #f8ecad;
   color: #7c6d1f;
   padding-right: 3em;
 }
-/* line 60, ../sass/offline-theme-slide.sass */
+/* line 67, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after {
   -webkit-animation: offline-rotation 0.7s linear infinite;
   -moz-animation: offline-rotation 0.7s linear infinite;
@@ -531,10 +497,8 @@
   -o-animation: offline-rotation 0.7s linear infinite;
   animation: offline-rotation 0.7s linear infinite;
   -webkit-backface-visibility: hidden;
-  -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
-  -ms-border-radius: 50%;
-  -o-border-radius: 50%;
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   content: " ";
   display: block;
@@ -545,16 +509,24 @@
   margin: auto;
   height: 1em;
   width: 1em;
-  border: 2px solid rgba(0, 0, 0, 0);
+  border: 2px solid transparent;
   border-top-color: #7c6d1f;
   border-left-color: #7c6d1f;
   opacity: 0.7;
 }
-/* line 77, ../sass/offline-theme-slide.sass */
+/* line 84, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting {
-  padding-right: 11em;
+  padding-right: 15em;
 }
-/* line 80, ../sass/offline-theme-slide.sass */
+/* line 87, ../sass/offline-theme-slide.sass */
 .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
   padding-right: 0;
 }
+/* line 90, ../sass/offline-theme-slide.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled {
+  padding-right: 10em;
+}
+/* line 92, ../sass/offline-theme-slide.sass */
+.offline-ui.offline-ui-down.offline-ui-reconnect-canceled .offline-ui-retry {
+  right: 0;
+}