We’ve successfully exported your scoped email into builder.
We just opened a brand new tab in your browser, in there you’ll find your scoped email ready to be edited.
Take me back to scope
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
<title>Super Mail Quest</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="robots" content="noindex,nofollow" />
<style type="text/css">
.sc{
display:none;
}
@supports (animation:game){
#interactive:checked ~ .wrapper [class].fallback{
display:none;
}
#interactive:checked ~ .wrapper .game{
display:block !important;
max-height:none !important;
}
}
#sc0:checked ~ * .sc0,
#sc1:checked ~ * .sc1,
#sc1b:checked ~ * .sc1,
#sc2:checked ~ * .sc2,
#sc2b:checked ~ * .sc2,
#sc2c:checked ~ * .sc2,
#sc2d:checked ~ * .sc2,
#sc3:checked ~ * .sc3,
#sc3b:checked ~ * .sc3,
#sc3c:checked ~ * .sc3,
#sc3d:checked ~ * .sc3,
#sc3e:checked ~ * .sc3,
#sc3f:checked ~ * .sc3,
#sc3g:checked ~ * .sc3,
#sc4:checked ~ * .sc4,
#sc4a1:checked ~ * .sc4,
#sc4a2:checked ~ * .sc4,
#sc4b:checked ~ * .sc4,
#sc4b1:checked ~ * .sc4,
#sc4b2:checked ~ * .sc4,
#sc4b3:checked ~ * .sc4,
#sc4b4:checked ~ * .sc4,
#sc4b5:checked ~ * .sc4,
#sc4b6:checked ~ * .sc4,
#sc4c:checked ~ * .sc4,
#sc4c1:checked ~ * .sc4,
#sc4c2:checked ~ * .sc4,
#sc4d:checked ~ * .sc4,
#sc4d1:checked ~ * .sc4,
#sc4d2:checked ~ * .sc4,
#sc4d3:checked ~ * .sc4,
#sc4d4:checked ~ * .sc4,
#sc4d5:checked ~ * .sc4,
#sc4d6:checked ~ * .sc4,
#sc4e:checked ~ * .sc4,
#sc4e1:checked ~ * .sc4,
#sc4e2:checked ~ * .sc4,
#sc5:checked ~ * .sc5,
#sc5b:checked ~ * .sc5,
#sc5c:checked ~ * .sc5,
#sc5d:checked ~ * .sc5,
#sc5e:checked ~ * .sc5,
#sc5f:checked ~ * .sc5,
#sc6:checked ~ * .sc6,
#sc6b:checked ~ * .sc6,
#sc6c:checked ~ * .sc6,
#sc6d:checked ~ * .sc6,
#sc6e:checked ~ * .sc6,
#sc6f:checked ~ * .sc6,
#sc6g:checked ~ * .sc6,
#sc6h:checked ~ * .sc6,
#sc6i:checked ~ * .sc6,
#sc7:checked ~ * .sc7,
#sc7b:checked ~ * .sc7,
#sc7c:checked ~ * .sc7,
#sc7d:checked ~ * .sc7,
#sc7e:checked ~ * .sc7,
#sc7f:checked ~ * .sc7,
#sc7g:checked ~ * .sc7,
#sc8:checked ~ * .sc8,
#sc8b:checked ~ * .sc8,
#sc8c:checked ~ * .sc8,
#sc8d:checked ~ * .sc8,
#sc8e:checked ~ * .sc8,
#sc8f:checked ~ * .sc8,
#sc8g:checked ~ * .sc8,
#sc8h:checked ~ * .sc8,
#sc8i:checked ~ * .sc8,
#sc8j:checked ~ * .sc8,
#sc8k:checked ~ * .sc8,
#sc8l:checked ~ * .sc8 {
display: block;
-webkit-animation: fade-in 1s linear forwards;
-webkit-animation-iteration-count: 1;
}
/* Sub scs */
#sc1:checked ~ * #ct-1b,
#sc1b:checked ~ * #ct-1a,
#sc2:checked ~ * #ct-2b, #ct-2c, #ct-2d,
#sc2b:checked ~ * #ct-2a, #ct-2c, #ct-2d,
#sc2c:checked ~ * #ct-2a, #ct-2b, #ct-2d,
#sc2d:checked ~ * #ct-2a, #ct-2b, #ct-2c,
#sc3:checked ~ * #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3b:checked ~ * #ct-3a, #ct-3c, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3c:checked ~ * #ct-3a, #ct-3b, #ct-3d, #ct-3e, #ct-3f, #ct-3g,
#sc3d:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3e, #ct-3f, #ct-3g,
#sc3e:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3f, #ct-3g,
#sc3f:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3g,
#sc3g:checked ~ * #ct-3a, #ct-3b, #ct-3c, #ct-3d, #ct-3e, #ct-3f,
#sc4:checked ~ * #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a1:checked ~ * #ct-4a, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4a2:checked ~ * #ct-4a, #ct-4a1, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4b6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b2, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d,#ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4c2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #csont-4d, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d3:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d4:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d5:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d6, #ct-4e, #ct-4e1, #ct-4e2,
#sc4d6:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4e, #ct-4e1, #ct-4e2,
#sc4e:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e1, #ct-4e2,
#sc4e1:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e2,
#sc4e2:checked ~ * #ct-4a, #ct-4a1, #ct-4a2, #ct-4b, #ct-4b1, #ct-4b2, #ct-4b3, #ct-4b4, #ct-4b5, #ct-4b6, #ct-4c, #ct-4c1, #ct-4c2, #ct-4d, #ct-4d1, #ct-4d2, #ct-4d3, #ct-4d4, #ct-4d5, #ct-4d6, #ct-4e, #ct-4e1,
#sc5:checked ~ * #ct-5b, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5b:checked ~ * #ct-5a, #ct-5c, #ct-5d, #ct-5e, #ct-5f,
#sc5c:checked ~ * #ct-5a, #ct-5b, #ct-5d, #ct-5e, #ct-5f,
#sc5d:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5e, #ct-5f,
#sc5e:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5f,
#sc5f:checked ~ * #ct-5a, #ct-5b, #ct-5c, #ct-5d, #ct-5e,
#sc6:checked ~ * #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6b:checked ~ * #ct-6a, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6c:checked ~ * #ct-6a, #ct-6b, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6d:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6e, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6e:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6f, #ct-6g, #ct-6h, #ct-6i,
#sc6f:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6g, #ct-6h, #ct-6i,
#sc6g:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6h, #ct-6i,
#sc6h:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6i,
#sc6i:checked ~ * #ct-6a, #ct-6b, #ct-6c, #ct-6d, #ct-6e, #ct-6f, #ct-6g, #ct-6h,
#sc7:checked ~ * #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7b:checked ~ * #ct-7a, #ct-7c, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7c:checked ~ * #ct-7a, #ct-7b, #ct-7d, #ct-7e, #ct-7f, #ct-7g,
#sc7d:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7e, #ct-7f, #ct-7g,
#sc7e:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7f, #ct-7g,
#sc7f:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7g,
#sc7g:checked ~ * #ct-7a, #ct-7b, #ct-7c, #ct-7d, #ct-7e, #ct-7f,
#sc8:checked ~ * #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8b:checked ~ * #ct-8a, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8c:checked ~ * #ct-8a, #ct-8b, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8d:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8e:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8f:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8g:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8h, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8h:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8i, #ct-8j, #ct-8k, #ct-8l,
#sc8i:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8j, #ct-8k, #ct-8l,
#sc8j:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8k, #ct-8l,
#sc8k:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8l,
#sc8l:checked ~ * #ct-8a, #ct-8b, #ct-8c, #ct-8d, #ct-8e, #ct-8f, #ct-8g, #ct-8h, #ct-8i, #ct-8j, #ct-8k {
display: none;
}
#sc1b:checked ~ * #ct-1b,
#sc2b:checked ~ * #ct-2b,
#sc2c:checked ~ * #ct-2c,
#sc2d:checked ~ * #ct-2d,
#sc3b:checked ~ * #ct-3b,
#sc3c:checked ~ * #ct-3c,
#sc3d:checked ~ * #ct-3d,
#sc3e:checked ~ * #ct-3e,
#sc3f:checked ~ * #ct-3f,
#sc3g:checked ~ * #ct-3g,
#sc4a:checked ~ * #ct-4a,
#sc4a1:checked ~ * #ct-4a1,
#sc4a2:checked ~ * #ct-4a2,
#sc4b:checked ~ * #ct-4b,
#sc4b1:checked ~ * #ct-4b1,
#sc4b2:checked ~ * #ct-4b2,
#sc4b3:checked ~ * #ct-4b3,
#sc4b4:checked ~ * #ct-4b4,
#sc4b5:checked ~ * #ct-4b5,
#sc4b6:checked ~ * #ct-4b6,
#sc4c:checked ~ * #ct-4c,
#sc4c1:checked ~ * #ct-4c1,
#sc4c2:checked ~ * #ct-4c2,
#sc4d:checked ~ * #ct-4d,
#sc4d1:checked ~ * #ct-4d1,
#sc4d2:checked ~ * #ct-4d2,
#sc4d3:checked ~ * #ct-4d3,
#sc4d4:checked ~ * #ct-4d4,
#sc4d5:checked ~ * #ct-4d5,
#sc4d6:checked ~ * #ct-4d6,
#sc4e:checked ~ * #ct-4e,
#sc4e1:checked ~ * #ct-4e1,
#sc4e2:checked ~ * #ct-4e2,
#sc5b:checked ~ * #ct-5b,
#sc5c:checked ~ * #ct-5c,
#sc5d:checked ~ * #ct-5d,
#sc5e:checked ~ * #ct-5e,
#sc5f:checked ~ * #ct-5f,
#sc6b:checked ~ * #ct-6b,
#sc6c:checked ~ * #ct-6c,
#sc6d:checked ~ * #ct-6d,
#sc6e:checked ~ * #ct-6e,
#sc6f:checked ~ * #ct-6f,
#sc6g:checked ~ * #ct-6g,
#sc6h:checked ~ * #ct-6h,
#sc6i:checked ~ * #ct-6i,
#sc7b:checked ~ * #ct-7b,
#sc7c:checked ~ * #ct-7c,
#sc7d:checked ~ * #ct-7d,
#sc7e:checked ~ * #ct-7e,
#sc7f:checked ~ * #ct-7f,
#sc7g:checked ~ * #ct-7g,
#sc8b:checked ~ * #ct-8b,
#sc8c:checked ~ * #ct-8c,
#sc8d:checked ~ * #ct-8d,
#sc8e:checked ~ * #ct-8e,
#sc8f:checked ~ * #ct-8f,
#sc8g:checked ~ * #ct-8g,
#sc8h:checked ~ * #ct-8h,
#sc8i:checked ~ * #ct-8i,
#sc8j:checked ~ * #ct-8j,
#sc8k:checked ~ * #ct-8k,
#sc8l:checked ~ * #ct-8l {
display: block;
-webkit-animation: fade-in 1s;
-webkit-animation-iteration-count: 1 linear forwards;
}
.bg-sc {
width: 60em;
height: 42em;
position: relative;
overflow: hidden;
}
.bg-0{background-image: url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-0_1.jpg'); background-position: center bottom;}
.bg-1{background-image: url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-1_2.jpg'); background-position: center bottom;}
.bg-2{background-image: url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-2_3.jpg'); background-position: center bottom;}
.bg-3{background-image: url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-3_4.jpg'); background-position: center bottom;}
.bg-4{background-image: url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-4_5.jpg'); background-position: center bottom;}
.bg-5{background-image: url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-5_6.jpg'); background-position: center bottom;}
.bg-6{background-image: url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-6_7.jpg'); background-position: center bottom;}
.bg-7{background-image: url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-7_8.jpg'); background-position: center bottom;}
.bg-8{background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-8_9.png'); background-position: center bottom;}
.ui {
background: #2b2122;
background: -webkit-linear-gradient(top, #2b2122 0%,#000000 100%);
background: linear-gradient(top bottom, #2b2122 0%,#000000 100%);
padding: 2em 3em;
width: 54em;
}
.panel {
background: #0d082d;
background: -webkit-linear-gradient(top, #333861 0%,#0d082d 100%);
background: linear-gradient(top bottom, #333861 0%,#0d082d 100%);
border: 5px solid #ffffff;
mso-border-alt:none;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 53em;
}
.cont {
width: 90%;
padding: 5%;
}
/* GENERIC sc STYLES */
.hero-w-t {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-t-sprite_45.png');
-webkit-animation:sprite .5s steps(3) 7 forwards;
}
.hero-w-r {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-r-sprite_46.png');
-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-w-b {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
-webkit-animation:sprite .6s steps(5) 7 forwards;
}
.hero-w-l {
width:6em;
position: relative;
height:6.4em;
background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-l-sprite_48.png');
-webkit-animation:sprite .6s steps(3) 6 forwards;
}
.hero-e-t {
margin: 29em 0 0 27em;
-webkit-animation: entrance-t 4s;
position: absolute;
z-index:10;
}
.hero-e-r {
margin: 25em 0 0 38em;
-webkit-animation: entrance-r 4s;
position: absolute;
z-index:10;
}
.hero-e-b {
margin: 32em 0 0 27em;
-webkit-animation: entrance-b 4s;
position: absolute;
z-index:10;
}
.hero-e-l {
margin: 25em 0 0 18em;
-webkit-animation: entrance-l 4s;
position: absolute;
z-index:10;
}
/* sc 0 STYLES */
.logo{
padding:3em 0 0 0;
width: 90%;
height: auto;
-webkit-animation: logo 3.5s;
}
.hero-container {
position: relative;
background-image: url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-anim_49.gif'); background-position: center bottom;
background-size: cover;
width: 60em;
height: 8.3em;
margin: 16.9em 0 0 0;
}
.sc-0-ui label h2 {
-webkit-animation: blink 2s linear infinite;
}
/* sc 1 STYLES */
#sc1:checked ~ * .grandolf,
#sc1:checked ~ * .dmarkster,
#sc1:checked ~ * .obiwon {
display: none;
}
#sc1b:checked ~ * .grandolf {
display: block;
margin: 28em 0 0 40em;
-webkit-animation:jump-for-joy .6s ease-in infinite;
}
#sc1b:checked ~ * .dmarkster {
display: block;
margin: 18em 0 0 27.5em;
-webkit-animation:jump-for-joy .8s ease-in infinite;
-webkit-animation-delay: 3.1s;
}
#sc1b:checked ~ * .fade-in {
display: block;
opacity: 0;
-webkit-animation: transport-in 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 2.5s;
}
#sc1b:checked ~ * .obiwon {
display: block;
margin: 28em 0 0 15em;
-webkit-animation:jump-for-joy .7s ease-in infinite;
-webkit-animation-delay: .3s;
}
#sc1b:checked ~ * .fireworks {
display: block;
width: 60em;
height: 42em;
position: absolute;
background-image: url('http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/fireworks_50.gif');
background-position: center top;
background-size:60em 42em;
}
/* sc 2 STYLES */
.cat {
margin: 22em 0 0 16em;
position: absolute;
}
#laser {
margin: 28em 0 0 23em;
position: absolute;
z-index: 13;
display: none;
}
#poof {
margin: 23em 0 0 18em;
position: absolute;
display: none;
z-index: 5;
}
#spam {
margin: 27.5em 0 0 38em;
position: absolute;
z-index: 12;
display: none;
}
#sc2c:checked ~ * .hero-e-r{margin: 28em 0 0 38em;}
#sc2c:checked ~ * .hero-w-r{
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 7em 4.4em;
width: 7em;
height: 4.4em;
}
#sc2d:checked ~ * #laser{
display: block;
-webkit-animation: shot-fired .5s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2c:checked ~ * #laser{
display: block;
-webkit-animation: target-accuired .2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #spam{
display: block;
-webkit-animation: shield-me-up 1s forwards;
-webkit-animation-iteration-count: 1;
}
#sc2d:checked ~ * #poof{
display: block;
width:8.5em;
height:11.8em;
background-repeat:no-repeat!important;
background-image:url('http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/smoke_52.png');
-webkit-animation: sprite 1s steps(6) 1 forwards;
}
#sc2d:checked ~ * .cat{
-webkit-animation: smoke-the-cat 1.5s forwards;
-webkit-animation-iteration-count: 1;
}
/* sc 3 STYLES */
.grandolf {
margin: 22em 0 0 36em;
position: absolute;
}
#sc3g:checked ~ * .hero-e-l{
-webkit-animation: body-shot 1s forwards;
-webkit-animation-iteration-count: 1;
}
/* sc 4 STYLES */
.dmarkster {
display: none;
position: absolute;
margin: 18em 0 0 28em;
z-index: 10;
}
#sc4:checked ~ * .hero-e-b,
#sc4a1:checked ~ * .hero-e-b,
#sc4a2:checked ~ * .hero-e-b,
#sc4b:checked ~ * .hero-e-b,
#sc4b1:checked ~ * .hero-e-b,
#sc4b2:checked ~ * .hero-e-b,
#sc4b3:checked ~ * .hero-e-b,
#sc4b4:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b5:checked ~ * .hero-e-b,
#sc4b6:checked ~ * .hero-e-b,
#sc4d:checked ~ * .hero-e-b,
#sc4d1:checked ~ * .hero-e-b,
#sc4d2:checked ~ * .hero-e-b,
#sc4d3:checked ~ * .hero-e-b,
#sc4d4:checked ~ * .hero-e-b,
#sc4d5:checked ~ * .hero-e-b,
#sc4d6:checked ~ * .hero-e-b {
display: none;
}
#sc4b:checked ~ * .hero-w-l,
#sc4d:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-animation: sprite-rev .6s steps(3) 6 forwards;
}
#sc4c:checked ~ * .hero-e-b,
#sc4c1:checked ~ * .hero-e-b,
#sc4c2:checked ~ * .hero-e-b,
#sc4e:checked ~ * .hero-e-b,
#sc4e1:checked ~ * .hero-e-b,
#sc4e2:checked ~ * .hero-e-b {
display: block;
}
#sc4c:checked ~ * .hero-e-l,
#sc4c1:checked ~ * .hero-e-l,
#sc4c2:checked ~ * .hero-e-l,
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
display: none;
}
.dungeon-ts {
position: absolute;
width: 60em;
height: 9.4em;
top: 0;
overflow: hidden;
}
.dungeon-ms {
position: absolute;
margin: 11.1em 0 0 0;
width: 60em;
height: 13.5em;
overflow: hidden;
}
.ts-1, .ts-2, .ts-3, .ts-4 {display: none; position: absolute; width: 19.4em; height: auto;}
.ts-5 {display: none; position: absolute; width: 19.4em; height: auto;}
.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {display: none; position: absolute; width: 17.3em; height: auto;}
.lvl-up {
display: none;
position: absolute;
margin: 0 0 0 35%;
bottom: 0;
z-index: 6;
}
#sc4c:checked ~ * .lvl-up,
#sc4c1:checked ~ * .lvl-up,
#sc4c2:checked ~ * .lvl-up,
#sc4d:checked ~ * .lvl-up,
#sc4e:checked ~ * .lvl-up,
#sc4e1:checked ~ * .lvl-up,
#sc4e2:checked ~ * .lvl-up {
display:block;
}
#sc4b:checked ~ * .rh-wall,
#sc4b:checked ~ * .ts-2,
#sc4b:checked ~ * .ms-2,
#sc4b:checked ~ * .ms-4,
#sc4b:checked ~ * .mimic-cont,
#sc4d:checked ~ * .rh-wall,
#sc4d:checked ~ * .lair,
#sc4d:checked ~ * .ts-2,
#sc4d:checked ~ * .ms-2,
#sc4d:checked ~ * .ms-4 {
-webkit-animation: in-r 4s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4b:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-4,
#sc4b:checked ~ * .ms-1,
#sc4d:checked ~ * .lh-wall,
#sc4d:checked ~ * .ts-3,
#sc4d:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-3,
#sc4d:checked ~ * .lvl-up {
-webkit-animation: out-l 4s forwards;
-webkit-animation-iteration-count: 1;
}
.lh-wall {
display: none;
position: absolute;
margin: 0 0 0 0;
left: 0;
z-index: 5;
}
#sc4c:checked ~ * .lh-wall,
#sc4c1:checked ~ * .lh-wall,
#sc4c2:checked ~ * .lh-wall,
#sc4d:checked ~ * .lh-wall,
#sc4e:checked ~ * .lh-wall,
#sc4e1:checked ~ * .lh-wall,
#sc4e2:checked ~ * .lh-wall {
display:block;
}
.rh-wall {
display: none;
position: absolute;
margin: 0 0 0 0;
right: 0;
z-index: 0;
}
#sc4b:checked ~ * .rh-wall,
#sc4b1:checked ~ * .rh-wall,
#sc4b2:checked ~ * .rh-wall,
#sc4b3:checked ~ * .rh-wall,
#sc4b4:checked ~ * .rh-wall,
#sc4b5:checked ~ * .rh-wall,
#sc4b6:checked ~ * .rh-wall,
#sc4d:checked ~ * .rh-wall,
#sc4d1:checked ~ * .rh-wall,
#sc4d2:checked ~ * .rh-wall,
#sc4d3:checked ~ * .rh-wall,
#sc4d4:checked ~ * .rh-wall,
#sc4d5:checked ~ * .rh-wall,
#sc4d6:checked ~ * .rh-wall,
#sc4e:checked ~ * .rh-wall,
#sc4e1:checked ~ * .rh-wall,
#sc4e2:checked ~ * .rh-wall {
display:block;
}
/* 4a */
#sc4:checked ~ * .dmarkster,
#sc4a1:checked ~ * .dmarkster,
#sc4c:checked ~ * .dmarkster,
#sc4c1:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e:checked ~ * .dmarkster,
#sc4e1:checked ~ * .dmarkster{
display: block;
-webkit-animation: transport-in 2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4a2:checked ~ * .dmarkster,
#sc4c2:checked ~ * .dmarkster,
#sc4e2:checked ~ * .dmarkster {
display: block;
-webkit-animation: transport-out 2s forwards;
-webkit-animation-iteration-count: 1;
}
#sc4:checked ~ * .ts-1,
#sc4a1:checked ~ * .ts-1,
#sc4a2:checked ~ * .ts-1,
#sc4b:checked ~ * .ts-1 {
display:block;
padding: 0 0 0 5%;
}
#sc4:checked ~ * .ts-4,
#sc4a1:checked ~ * .ts-4,
#sc4a2:checked ~ * .ts-4,
#sc4b:checked ~ * .ts-4 {
display:block;
padding: 0 0 0 60%;
}
#sc4:checked ~ * .ms-1,
#sc4a1:checked ~ * .ms-1,
#sc4a2:checked ~ * .ms-1,
#sc4b:checked ~ * .ms-1 {
display:block;
padding: 0 0 0 35%;
}
/* 4b */
.mimic-cont {
display: none;
position: absolute;
width:13em;
height:9em;
margin: 23em 0 0 36em;
z-index: 2;
}
.mimic {
background-size:129.6em 9em;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
background-position: 0 0;
background-repeat: no-repeat;
}
.twinkie {
display: none;
position: absolute;
width:6em;
margin: 26em 0 0 20em;
z-index: 20;
}
#sc4b:checked ~ * .ts-2,
#sc4b1:checked ~ * .ts-2,
#sc4b2:checked ~ * .ts-2,
#sc4b3:checked ~ * .ts-2,
#sc4b4:checked ~ * .ts-2,
#sc4b5:checked ~ * .ts-2,
#sc4b6:checked ~ * .ts-2 {
display:block;
padding: 0 0 0 55%;
}
#sc4b:checked ~ * .ms-2,
#sc4b1:checked ~ * .ms-2,
#sc4b2:checked ~ * .ms-2,
#sc4b3:checked ~ * .ms-2,
#sc4b4:checked ~ * .ms-2,
#sc4b5:checked ~ * .ms-2,
#sc4b6:checked ~ * .ms-2 {
display:block;
}
#sc4b:checked ~ * .ms-4,
#sc4b1:checked ~ * .ms-4,
#sc4b2:checked ~ * .ms-4,
#sc4b3:checked ~ * .ms-4,
#sc4b4:checked ~ * .ms-4,
#sc4b5:checked ~ * .ms-4,
#sc4b6:checked ~ * .ms-4 {
display:block;
padding: 0 0 0 35%;
}
#sc4b:checked ~ * .mimic-cont,
#sc4b1:checked ~ * .mimic-cont,
#sc4b2:checked ~ * .mimic-cont,
#sc4b3:checked ~ * .mimic-cont,
#sc4b4:checked ~ * .mimic-cont,
#sc4b5:checked ~ * .mimic-cont,
#sc4b6:checked ~ * .mimic-cont {
display: block!important;
}
#sc4b:checked ~ * .mimic,
#sc4b1:checked ~ * .mimic {
display: block!important;
width:13em;
height:9.1em;
background-size:129.6em 9em;
background-position: 0 0;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b2:checked ~ * .mimic,
#sc4b3:checked ~ * .mimic,
#sc4b4:checked ~ * .mimic,
#sc4b5:checked ~ * .mimic,
#sc4b6:checked ~ * .mimic {
display: block!important;
width:13em;
height:9.1em;
background-size:129.6em 9em;
background-position: 100% 0;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
}
#sc4b3:checked ~ * .hero-e-l,
#sc4b4:checked ~ * .hero-e-l {
-webkit-animation: none;
}
#sc4b1:checked ~ * .hero-w-l,
#sc4b2:checked ~ * .hero-w-l,
#sc4b3:checked ~ * .hero-w-l,
#sc4b4:checked ~ * .hero-w-l {
-webkit-animation: none;
}
#sc4b1:checked ~ * .mimic {
-webkit-animation: boo .6s steps(9) 1 forwards;
}
#sc4b2:checked ~ * .hero-e-l {
-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4b5:checked ~ * .hero-e-l,
#sc4b6:checked ~ * .hero-e-l {
-webkit-animation: jump-f .6s steps(9) 1 forwards;
}
#sc4b4:checked ~ * .twinkie {
display: block;
-webkit-animation: twinkie-in-the-hole .5s 1 forwards;
transition-timing-function: ease-in-out;
}
#sc4b4:checked ~ * .mimic {
-webkit-animation: back-up-mofo 1.0s steps(9) 1 forwards;
}
/* 4c */
#sc4c:checked ~ * .ts-3,
#sc4c1:checked ~ * .ts-3,
#sc4c2:checked ~ * .ts-3,
#sc4d:checked ~ * .ts-3 {
display:block;
padding: 0 0 0 35%;
}
#sc4c:checked ~ * .ms-1,
#sc4c1:checked ~ * .ms-1,
#sc4c2:checked ~ * .ms-1,
#sc4d:checked ~ * .ms-1 {
display:block;
padding: 0 0 0 10%;
}
#sc4c:checked ~ * .ms-3,
#sc4c1:checked ~ * .ms-3,
#sc4c2:checked ~ * .ms-3,
#sc4d:checked ~ * .ms-3 {
display:block;
padding: 0 0 0 45%;
}
#sc4c:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
-webkit-animation: entrance-b 4s;
position: absolute;
}
/* 4d */
#sc4d:checked ~ * .ts-2,
#sc4d1:checked ~ * .ts-2,
#sc4d2:checked ~ * .ts-2,
#sc4d3:checked ~ * .ts-2,
#sc4d4:checked ~ * .ts-2,
#sc4d5:checked ~ * .ts-2,
#sc4d6:checked ~ * .ts-2 {
display:block;
padding: 0 0 0 50%;
}
#sc4d:checked ~ * .ms-2,
#sc4d1:checked ~ * .ms-2,
#sc4d2:checked ~ * .ms-2,
#sc4d3:checked ~ * .ms-2,
#sc4d4:checked ~ * .ms-2,
#sc4d5:checked ~ * .ms-2,
#sc4d6:checked ~ * .ms-2 {
display:block;
padding: 0 0 0 5%;
}
#sc4d:checked ~ * .ms-4,
#sc4d1:checked ~ * .ms-4,
#sc4d2:checked ~ * .ms-4,
#sc4d3:checked ~ * .ms-4,
#sc4d4:checked ~ * .ms-4,
#sc4d5:checked ~ * .ms-4,
#sc4d6:checked ~ * .ms-4 {
display:block;
padding: 0 0 0 35%;
}
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .spidey,
#sc4d4:checked ~ * .spidey,
#sc4d5:checked ~ * .spidey,
#sc4d6:checked ~ * .spidey {
display:block;
}
#sc4d:checked ~ * .lair,
#sc4d1:checked ~ * .lair,
#sc4d2:checked ~ * .lair,
#sc4d3:checked ~ * .lair,
#sc4d4:checked ~ * .lair,
#sc4d5:checked ~ * .lair,
#sc4d6:checked ~ * .lair {
display: block;
}
#sc4d2:checked ~ * .hero-e-l,
#sc4d2:checked ~ * .spidey,
#sc4d3:checked ~ * .hero-e-l,
#sc4d1:checked ~ * .hero-w-l,
#sc4d2:checked ~ * .hero-w-l,
#sc4d3:checked ~ * .hero-w-l,
#sc4d5:checked ~ * .hero-w-l,
#sc4d6:checked ~ * .hero-w-l {
-webkit-animation: none;
}
.spidey {
display: none;
position: absolute;
margin: 2em 0 0 14em;
z-index: 11;
}
.lair {
display: none;
position: absolute;
margin: 0;
z-index: 6;
}
.spidey-sword {
display: none;
position: absolute;
margin: 22.5em 0 0 20.5em;
z-index: 11;
}
.web {
display: none;
position: absolute;
margin: 26em 0 0 18em;
z-index: 12;
}
.spidey-shield {
margin: 28em 0 0 21em;
position: absolute;
z-index: 12;
display: none;
}
#sc4d1:checked ~ * .spidey {
display: block;
-webkit-animation: suprise 1.2s linear forwards;
}
#sc4d1:checked ~ * .hero-e-l {
display: block;
-webkit-animation: jump-b .5s steps(9) 1 forwards;
}
#sc4d2:checked ~ * .spidey-sword {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: swing .2s linear forwards;
-webkit-animation-delay:.2s;
}
#sc4d2:checked ~ * .web {
display: block;
-webkit-animation: web-sling .4s linear forwards;
}
#sc4d3:checked ~ * .spidey-sword2 {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: swing-two .4s linear forwards;
}
#sc4d3:checked ~ * .spidey {
display: block;
-webkit-animation: take-that 1.5s linear forwards;
}
#sc4d4:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d4:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d5:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d5:checked ~ * .web {
display: block;
-webkit-animation: web-sling-two 3s linear forwards;
}
#sc4d6:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha 3s linear forwards;
}
#sc4d6:checked ~ * .hero-e-l {
display: block;
-webkit-animation: bites-the-dust 3s linear forwards;
}
#sc4d6:checked ~ * .spidey-shield {
display: block;
-webkit-animation: shield-me-up .6s linear forwards;
}
/* 4e */
#sc4e:checked ~ * .ts-5,
#sc4e1:checked ~ * .ts-5,
#sc4e2:checked ~ * .ts-5 {
display:block;
padding: 0 0 0 35%;
}
#sc4e:checked ~ * .ms-p1,
#sc4e1:checked ~ * .ms-p1,
#sc4e2:checked ~ * .ms-p1 {
display:block;
padding: 0 0 0 10%;
}
#sc4e:checked ~ * .ms-p2,
#sc4e1:checked ~ * .ms-p2,
#sc4e2:checked ~ * .ms-p2 {
display:block;
padding: 0 0 0 55%;
}
#sc4e:checked ~ * .hero-e-l,
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
-webkit-animation: entrance-b 5s!important;
position: absolute;
}
#sc4e1:checked ~ * .hero-e-l,
#sc4e2:checked ~ * .hero-e-l {
margin: 290px 0 0 270px;
}
#sc4e:checked ~ * .hero-w-l,
#sc4e1:checked ~ * .hero-w-l,
#sc4e2:checked ~ * .hero-w-l {
width:6em;
position: relative;
height:6.4em;
background-repeat:no-repeat!important;
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-w-b-sprite_47.png');
-webkit-animation:sprite .6s steps(5) 7 forwards;
}
/* sc 5 STYLES */
.obiwon {
margin: 235px 0 0 170px;
width: 60px;
height: 78px;
position: absolute;
}
#sc5e:checked ~ * .obiwon{
-webkit-animation-delay: .2s;
-webkit-animation: eject 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
transform-origin: 50% 50%;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#sc5f:checked ~ * .hero-e-r{
-webkit-animation-delay: .2s;
-webkit-animation: eject-hero 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
transform-origin: 50% 50%;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
/* sc 6 STYLES */
.boulder {
margin: 40px 0 0 200px;
position: absolute;
z-index: 13;
}
.stone-1 {
background-image:url('http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-off_54.png');
margin: 255px 0 0 210px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
.stone-2 {
background-image:url('http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-off_55.png');
margin: 255px 0 0 280px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
.stone-3 {
background-image:url('http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-off_56.png');
margin: 255px 0 0 350px;
width: 50px;
height: 50px;
background-size: 50px 50px;
position: absolute;
}
#sc6e:checked ~ * .hero-w-r {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 70px 44px;
width: 70px;
height: 44px;
}
#sc6b:checked ~ * .stone-1,
#sc6e:checked ~ * .stone-1,
#sc6g:checked ~ * .stone-1,
#sc6h:checked ~ * .stone-1,
#sc6i:checked ~ * .stone-1{
background-image:url('http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2010-on_57.png');
}
#sc6c:checked ~ * .stone-2,
#sc6e:checked ~ * .stone-2,
#sc6f:checked ~ * .stone-2,
#sc6h:checked ~ * .stone-2,
#sc6i:checked ~ * .stone-2 {
background-image:url('http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2013-on_58.png');
}
#sc6d:checked ~ * .stone-3,
#sc6f:checked ~ * .stone-3,
#sc6g:checked ~ * .stone-3,
#sc6h:checked ~ * .stone-3,
#sc6i:checked ~ * .stone-3 {
background-image:url('http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc6-2007-on_59.png');
}
#sc6i:checked ~ * .boulder {
-webkit-animation-delay: .2s;
-webkit-animation: boulder-n-roll 2s forwards;
-webkit-animation-iteration-count: 1;
transform-origin: 50% 50%;
}
#sc6h:checked ~ * .boulder {
-webkit-animation: boulder-n-roll-is-dead 2s forwards;
-webkit-animation-iteration-count: 1;
transform-origin: 50% 50%;
}
#sc6h:checked ~ * .hero-w-b {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 70px 44px;
width: 70px;
height: 44px;
}
/* sc 7 STYLES */
.toady-tongue{
margin: 28em 0 0 28em;
z-index: 11;
position: absolute;
display: none;
}
.toady {
margin: 20em 0 0 33em;
z-index: 5;
position: absolute;
}
.sword1 {
display: none;
position: absolute;
z-index: 11;
}
.sword2 {
display: none;
position: absolute;
z-index: 11;
}
.tree {
margin: 15em 0 0 19em;;
position: absolute;
}
#sc7:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
}
#sc7:checked ~ * .toady,
#sc7c:checked ~ * .toady {
-webkit-transform: scaleX(-1);
}
#sc7b:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:tree .5s linear forwards;
}
#sc7b:checked ~ * .hero-w-l,
#sc7c:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-animation: sprite-rev .6s steps(3) 2 forwards;
}
#sc7c:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:toad .5s linear forwards;
}
#sc7d:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation:hero-attack .5s linear forwards;
}
#sc7d:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack .4s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7d:checked ~ * .sword1{
display: block;
margin: 19.5em 0 0 22.5em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:sword-attack .5s linear forwards;
}
#sc7e:checked ~ * .hero-e-l {
margin: 34em 0 0 20em;
-webkit-animation:hero-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .sword2 {
display: block;
margin: 31.7em 0 0 22.3em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:sword-attack-two 1.5s linear forwards;
}
#sc7e:checked ~ * .toady {
-webkit-animation:toad-turn 1.5s linear forwards;
}
#sc7f:checked ~ * .hero-e-l {
margin: 22em 0 0 20em;
-webkit-animation:dodge .3s linear forwards;
}
#sc7f:checked ~ * .hero-w-l {
-webkit-animation: none;
}
#sc7f:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-tree 1.5s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7f:checked ~ * .tree{
-webkit-animation:roll-tree 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-e-l {
margin: 34em 0 0 20em;
-webkit-animation:runaway 1.5s linear forwards;
}
#sc7g:checked ~ * .hero-w-l {
background-position: 100% 0;
-webkit-transform: scaleX(-1);
-webkit-animation: sprite .6s steps(3) 2 forwards;
}
#sc7g:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack-long 1.5s linear forwards;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:100% 50%;
}
/* sc 8 STYLES */
.warlock {
position: absolute;
margin: 22em 0 0 35em;
}
.warlock img {
width:15em!important;
height:auto;
}
.blast-1 {
display: none;
position: absolute;
margin: 23em 0 0 30em;
z-index: 2;
}
.blast-2 {
display: none;
position: absolute;
margin: 28em 0 0 30em;
z-index: 12;
}
.blast-3 {
display: none;
position: absolute;
margin: 33em 0 0 30em;
z-index: 12;
}
.sword {
display: none;
position: absolute;
margin: 25.4em 0 0 12.2em;
z-index: 11;
}
#shield {
opacity: 0;
margin: 31em 0 0 20em;
position: absolute;
z-index: 12;
}
#sc8:checked ~ * .hero-e-l,
#sc8b:checked ~ * .hero-e-l,
#sc8c:checked ~ * .hero-e-l,
#sc8d:checked ~ * .hero-e-l,
#sc8e:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8g:checked ~ * .hero-e-l,
#sc8i:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l,
#sc8l:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
}
#sc8:checked ~ * .sc,
#sc8b:checked ~ * .sc,
#sc8c:checked ~ * .sc,
#sc8d:checked ~ * .sc,
#sc8e:checked ~ * .sc,
#sc8f:checked ~ * .sc,
#sc8g:checked ~ * .sc,
#sc8h:checked ~ * .sc,
#sc8i:checked ~ * .sc,
#sc8j:checked ~ * .sc,
#sc8k:checked ~ * .sc {
background: #21022d;
}
#sc8l:checked ~ * .sc {
animation: let-there-be-light 1s linear forwards;
}
#sc8c:checked ~ * .blast-2,
#sc8c:checked ~ * .blast-3,
#sc8f:checked ~ * .blast-4,
#sc8f:checked ~ * .blast-6 {
display: block;
-webkit-animation: blast-r-one .8s linear forwards;
}
#sc8c:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l {
-webkit-animation: move-on-up .5s linear forwards;
}
#sc8d:checked ~ * .blast-1,
#sc8d:checked ~ * .blast-5 {
display: block;
-webkit-animation: blast-r-two .8s linear forwards;
}
#sc8d:checked ~ * .hero-e-l {
margin: 28em 0 0 10em;
-webkit-animation: none;
}
#sc8e:checked ~ * .blast-end {
display: block!important;
-webkit-animation: blast-death .3s linear forwards;
}
#sc8e:checked ~ * .hero-e-l{
-webkit-animation: death .3s linear forwards;
}
#sc8g:checked ~ * .hero-e-l,
#sc8g:checked ~ * .sword {
-webkit-animation: head-on .5s linear forwards;
}
#sc8g:checked ~ * #shield{
-webkit-animation: shield-me-up .3s linear forwards;
-webkit-animation-delay: .2s;
}
#sc8g:checked ~ * .warlock {
-webkit-animation: lets-fight .5s linear forwards;
}
#sc8h:checked ~ * .warlock {
-webkit-animation: lets-fight-clash .5s linear forwards;
}
#sc8h:checked ~ * .hero-e-l{
margin: 28em 0 0 10em;
display: block;
-webkit-animation: head-on .5s linear forwards;
}
#sc8h:checked ~ * .sword{
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: head-on-swing .5s linear forwards;
}
#sc8i:checked ~ * .warlock,
#sc8j:checked ~ * .warlock {
-webkit-animation: doom .5s linear forwards;
z-index: 11;
}
#sc8i:checked ~ * .hero-e-l {
margin: 28em 0 0 5em;
-webkit-animation: none!important;
}
#sc8i:checked ~ * .sword {
display:block;
margin: 25.4em 0 0 7.2em;
-webkit-transform-origin: 50% 80%;
-webkit-animation:spin-out .5s linear forwards;
-webkit-animation-delay:.7s;
}
#sc8i:checked ~ * .hero-w-l{
-webkit-animation: death linear forwards .5s;
-webkit-animation-delay:.5s;
}
#sc8j:checked ~ * .hero-e-l {
margin: 28em 0 0 5em !important;
-webkit-animation-delay:.5s;
}
#sc8k:checked ~ * .sword {
display: block;
margin: 25.4em 0 0 12.2em;
-webkit-transform-origin: 50% 80%;
-webkit-animation: caught-it .35s linear forwards;
}
#sc8k:checked ~ * .hero-e-l{
margin: 28em 0 0 5em !important;
-webkit-animation: none;
}
#sc8k:checked ~ * .warlock {
margin:22em 0 0 13em;
}
#sc8k:checked ~ * .final-blast{
display: block;
margin: 30em 0 0 13em ;
-webkit-animation: final-blast .3s linear forwards;
}
#sc8k:checked ~ * .hero-w-l{
-webkit-animation: poof .3s linear forwards;
}
#sc8l:checked ~ * .hero-e-l {
margin: 28em 0 0 5em;
-webkit-animation: none;
}
#sc8l:checked ~ * .warlock {
margin: 22em 0 0 13em;
-webkit-animation: final-death .7s linear forwards;
}
#sc8l:checked ~ * .sword{
display: block;
margin: 25.5em 0 0 7.5em !important;
-webkit-transform-origin: 50% 80%;
-webkit-animation: final-blow .2s linear forwards;
}
/************* MOBILE CLASSES *************/
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
/* GAME STYLES */
.bg-sc {
width: 100vw;
height: 70vw;
position: relative;
}
.bg-0, .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8{background-size: cover;}
.ground {
width: 100vw!important;
height: 4.2vw;
}
.ui {
width: 96vw!important;
padding: 4vw 2vw;
}
.panel {
width: 90vw;
height: auto;
}
.hero-w-t {
width:16vw;
height:17vw;
background-size:64vw 17vw;
}
.hero-w-r {
width:16vw;
height:17vw;
background-size: 64vw 17vw;
}
.hero-w-b {
width:16vw;
height:17vw;
background-size: 96vw 17vw;
}
.hero-w-l {
width:16vw;
height:17vw;
background-size: 64vw 17vw;
}
.hero-e-t {
margin: 45vw 0 0 43vw;
}
.hero-e-r {
margin: 35vw 0 0 70vw;
}
.hero-e-b {
margin: 45vw 0 0 45vw;
}
.hero-e-l {
margin: 35vw 0 0 20vw;
}
/* sc 0 STYLES */
.logo{
padding:10vw 0 0 0;
width: 90vw;
height: auto;
-webkit-animation: logo 3.5s;
}
.hero-container {
position: absolute;
width: 100vw;
height: 20vw;
bottom: 0!important;
}
.hero-container img{
height: 20vw;
overflow: hidden
}
/* sc 1 STYLES */
#sc1b:checked ~ * .grandolf {
margin: 37vw 0 0 67vw;
}
#sc1b:checked ~ * .dmarkster {
margin: 20vw 0 0 44vw !important;
}
#sc1b:checked ~ * .obiwon {
margin: 42vw 0 0 20vw;
}
#sc1b:checked ~ * .fireworks {
width: 100vw;
height: 70vw;
background-size:100vw 70vw;
}
/* sc 2 STYLES */
.cat {
margin: 25vw 0 0 6vw;
}
.cat img {
width:25vw!important ;
height:auto;
}
#laser {
margin: 40vw 0 0 23vw;
}
#laser img {
width:15vw!important;
height:auto;
}
#poof {
margin: 26vw 0 0 8vw;
width:22vw!important;
height:auto;
}
#spam {
margin: 37vw 0 0 69vw;
}
#spam img {
width:10vw!important;
height:auto;
}
#sc2c:checked ~ * .hero-w-r {
background-image:url('http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/hero-death_51.png');
background-size: 20vw 13vw;
width:20vw;
height:13vw;
}
#sc2c:checked ~ * .hero-e-r {
margin: 39vw 0 0 70vw!important;
}
/* sc 3 STYLES */
.grandolf {
margin: 28vw 0 0 60vw;
}
.grandolf img {
width: 15vw!important;
height: auto;
}
/* sc 4 STYLES */
.dungeon-ts {
width: 100vw;
height: 15.5vw;
top: 0;
}
.dungeon-ms {
margin: 18vw 0 0 0;
width: 100vw;
height: 23.2vw;
}
.lh-wall {
width:12vw!important;
}
.lh-wall img {
width:12vw!important;
}
.rh-wall {
width:12vw!important;
}
.rh-wall img {
width:12vw!important;
}
.lvl-up {
width:35vw!important;
}
.lvl-up img {
width:35vw!important;
height: auto;
}
.dmarkster {
margin: 22vw 0 0 46vw;
}
.dmarkster img {
width: 13vw!important;
height: auto;
}
.mimic-cont {
width:28.9vw!important;
height:20vw!important;
margin: 32vw 0 0 55vw!important;
}
.mimic {
width:28.9vw!important;
height:20vw!important;
background-size:289vw 20vw!important;
background-position: 0 0;
}
.mimic-cont {
display: none;
position: absolute;
height:90px;
width:130px;
margin: 230px 0 0 360px;
z-index: 2;
}
.mimic {
background-size:1296px 90px;
background-image:url('http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mimic_53.png')!important;
background-position: 0 0;
background-repeat: no-repeat;
}
.twinkie {
margin: 40vw 0 0 20vw;
}
.twinkie img {
width: 12vw!important;
height: auto;
}
.spidey {
margin: -40vw 0 0 15vw;
}
.lair img {
width: 100vw!important;
height: auto;
}
.spidey img {
width: 35vw!important;
height: auto;
}
.ts-1, .ts-2, .ts-3, .ts-4 {width:31vw!important; height:15.5vw;}
.ts-5 {width:15.5vw!important; height: 15.5vw;}
.ms-1, .ms-2, .ms-3, .ms-4, .ms-p1, .ms-p2 {width: 33vw!important;height: 23.2vw;}
.ts-1 img, .ts-2 img, .ts-3 img, .ts-4 img {width:31vw!important; height:15.5vw;}
.ts-5 img {width: 15.5vw!important; height: 15.5vw!important;}
.ms-1 img, .ms-2 img, .ms-3 img, .ms-4 img, .ms-p1 img, .ms-p2 img {width: 33vw!important;height: 23.2vw;}
#sc4c:checked ~ * .hero-e-l {
margin: 50vw 0 0 46vw;
}
#sc4c:checked ~ * .hero-w-l {
width:14.1vw;
height:15vw;
background-size: 84.6vw 15vw;
}
#sc4d:checked ~ * .hero-e-l,
#sc4d1:checked ~ * .hero-e-l,
#sc4d2:checked ~ * .hero-e-l,
#sc4d3:checked ~ * .hero-e-l,
#sc4d4:checked ~ * .hero-e-l,
#sc4d5:checked ~ * .hero-e-l,
#sc4d6:checked ~ * .hero-e-l {
margin: 35vw 0 0 20vw;
}
#sc4e:checked ~ * .hero-e-l {
margin: 50vw 0 0 46vw;
}
#sc4e:checked ~ * .hero-w-l {
width:14.1vw;
height:15vw;
background-size: 84.6vw 15vw;
}
.spidey-sword {
margin: 31vw 0 0 27vw;
}
.spidey-sword img {
width: 6vw !important;
height: auto!important;
}
.web {
margin: 35vw 0 0 20vw;
}
.web img {
width: 15vw !important;
height: auto!important;
}
.spidey-shield {
margin: 43vw 0 0 28vw;
position: absolute;
z-index: 12;
display: none;
}
.spidey-shield img {
width: 8vw !important;
height: auto!important;
}
#sc4d4:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
#sc4d5:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
#sc4d6:checked ~ * .spidey {
display: block;
-webkit-animation: gotcha-m 3s linear forwards!important;
}
@-webkit-keyframes gotcha-m {
0%, 100% { transform: translateY(-200vw);}
20% { transform: translateY(10vw);}
}
/* sc 5 STYLES */
.obiwon {
margin: 31vw 0 0 10vw;
}
.obiwon img {
width:16vw!important;
height:auto;
}
/* sc 6 STYLES */
.boulder {
margin: 8vw 0 0 35vw;
}
.boulder img {
width:30vw!important;
height:auto;
}
.stone-1 {
margin: 40vw 0 0 32vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
.stone-2 {
margin: 40vw 0 0 47vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
.stone-3 {
margin: 40vw 0 0 62vw;
width: 10vw;
height: 10vw;
background-size: 10vw 10vw;
}
/* sc 7 STYLES */
#sc7:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
}
.toady-tongue{
margin: 42vw 0 0 48vw!important;
}
.toady-tongue img{
width:20vw!important;
height:auto;
}
.toady {
margin: 30vw 0 0 55vw!important;
}
.toady img {
width:45vw!important;
height:auto;
}
.sword1 img {
width:6vw!important;
height:auto;
}
.sword2 img {
width:6vw!important;
height:auto;
}
.tree {
margin: 26.5vw 0 0 32vw!important;
}
.tree img {
width:35vw!important;
height:auto;
}
#sc7b:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
-webkit-animation:tree-m .5s linear forwards!important;
}
#sc7c:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw;
-webkit-animation:toad-m .5s linear forwards!important;
}
@-webkit-keyframes tree-m {
0% {transform: translate(0vw,0vw)}
100% {transform: translate(15vw,-8vw)}
}
@-webkit-keyframes toad-m {
0% {transform: translate(0vw,0vw)}
100% {transform: translate(15vw,8vw)}
}
#sc7d:checked ~ * .hero-e-l {
margin: 40vw 0 0 10vw!important;
-webkit-animation:hero-attack-m .5s linear forwards!important;
}
#sc7d:checked ~ * .toady-tongue{
margin: 42vw 0 0 48vw!important;
-webkit-animation:toad-attack-m .5s linear forwards!important;
}
#sc7d:checked ~ * .sword1{
margin: 27.5vw 0 0 30vw!important;
-webkit-animation:sword-attack-m .5s linear forwards!important;
}
@-webkit-keyframes hero-attack-m {
0% {transform: translate(15vw,-8vw);}
90% {opacity:1;transform: translate(35vw,0px);}
98% {opacity:.8;}
100% { opacity:0; transform: translate(40vw,0px);}
}
@-webkit-keyframes toad-attack-m {
0%, 100% {opacity:0; transform: scale(0,1);}
5%, 90% {opacity:1; transform: scale(.2,1);}
80% {opacity:1; transform: scale(1,1);}
}
@-webkit-keyframes sword-attack-m {
0% {transform: translate(0,0);}
90% {opacity:1; transform: translate(19vw,8vw);}
98% {opacity:.8;}
100% {opacity:0; transform: translate(25vw,8vw);}
}
#sc7e:checked ~ * .hero-e-l {
margin: 48vw 0 0 25vw!important;
-webkit-animation:hero-attack-two-m 1.5s linear forwards!important;
}
#sc7e:checked ~ * .sword2 {
margin: 43.5vw 0 0 31.5vw!important;
-webkit-animation:sword-attack-two-m 1.5s linear forwards!important;
}
@-webkit-keyframes hero-attack-two-m {
0% {transform: translate(0,0)}
10%,90% {opacity:1;transform: translate(18vw,-8vw)}
100% {opacity:1;transform: translate(-8vw,-18vw)}
}
@-webkit-keyframes sword-attack-two-m {
0% {transform: translate(0,0) rotate(0deg)}
10% {transform: translate(18vw,-8vw) rotate(0deg)}
12% {transform: translate(18vw,-8vw) rotate(-60deg)}
20% {transform: translate(18vw,-8vw) rotate(80deg)}
30% {transform: translate(18vw,-8vw) rotate(0deg)}
90% {transform: translate(18vw,-8vw) rotate(0deg)}
100% {transform: translate(-8vw,-18vw) rotate(0deg)}
}
#sc7f:checked ~ * .hero-e-l {
margin: 32vw 0 0 25vw !important;
-webkit-animation:dodge .3s linear forwards;
}
#sc7f:checked ~ * .toady-tongue{
-webkit-animation:toad-tree-m 1.5s linear forwards;
-webkit-transform-origin:100% 50%;
}
#sc7f:checked ~ * .tree{
-webkit-animation:roll-tree-m 1.5s linear forwards;
}
@-webkit-keyframes toad-tree-m {
0% {opacity:0; transform: rotate(20deg) scale(0,1);}
10% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
90% {opacity:1; transform: rotate(20deg) scale(1.5,1);}
100% {opacity:1; transform: rotate(20deg) scale(.8,1);}
}
@-webkit-keyframes roll-tree-m {
0%, 90% {transform: translate(0px,0px)}
100% {transform: translate(14vw, 3vw)}
}
#sc7g:checked ~ * .hero-e-l {
margin: 48vw 0 0 25vw;
-webkit-animation:runaway-m 1.5s linear forwards;
}
#sc7g:checked ~ * .toady-tongue{
display: block;
-webkit-animation:toad-attack-long-m 1.5s linear forwards;
-webkit-transform:rotate(30deg);
-webkit-transform-origin:100% 50%;
}
@-webkit-keyframes toad-attack-long-m {
0%, 40% {opacity:0; transform: scale(0,1);}
50%, 70% {opacity:1; transform: scale(3,1);}
80% {opacity:1; transform: scale(.5,1);}
98% {opacity:1; transform: scale(0,1);}
100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes runaway-m {
0% {transform: translate(0px,0px)}
50%, 70% {transform: translate(-25vw,-8vw)}
80% {opacity:1; transform: translate(25vw,-8vw)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(40vw,-8vw)}
}
/* sc 8 STYLES */
.warlock {
margin:32vw 0 0 60vw;
}
.warlock img {
width:30vw!important;
height:auto;
}
.blast {
width: 10vw!important;
height: auto;
}
.blast-1 {
margin: 35vw 0 0 50vw;
}
.blast-2 {
margin: 45vw 0 0 50vw;
}
.blast-3 {
margin: 55vw 0 0 50vw;
}
.sword {
margin: 40vw 0 0 15vw!important;
z-index: 12;
}
.sword img {
width: 6vw!important;
height: auto!important;
}
#shield {
margin: 52vw 0 0 38vw;
z-index: 12;
}
#sc8:checked ~ * .hero-e-l,
#sc8b:checked ~ * .hero-e-l,
#sc8c:checked ~ * .hero-e-l,
#sc8d:checked ~ * .hero-e-l,
#sc8e:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8g:checked ~ * .hero-e-l,
#sc8i:checked ~ * .hero-e-l,
#sc8k:checked ~ * .hero-e-l,
#sc8l:checked ~ * .hero-e-l {
margin: 45vw 0 0 15vw!important;
}
#sc8i:checked ~ * .hero-e-l {
margin: 35vw 0 0 5vw!important;
-webkit-animation: none!important;
}
#sc8c:checked ~ * .hero-e-l,
#sc8f:checked ~ * .hero-e-l,
#sc8j:checked ~ * .hero-e-l {
-webkit-animation: move-on-up-m .5s linear forwards!important;
}
@-webkit-keyframes move-on-up-m {
0% { transform: translateY(0vw);}
50% { transform: translateY(-15vw);}
100% { transform: translateY(0vw);}
}
#sc8g:checked ~ * .hero-e-l,
#sc8g:checked ~ * .sword {
-webkit-animation: head-on-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-m {
0% { transform: translate(0vw,0vw);}
40%, 80% { transform: translate(15vw,0vw);}
100% { transform: translate(-5vw,0vw);}
}
#sc8g:checked ~ * .warlock {
-webkit-animation: lets-fight-m .3s linear forwards!important;
}
@-webkit-keyframes lets-fight-m {
0% { transform: translateX(0vw);}
100% { transform: translateX(-16vw);}
}
#sc8h:checked ~ * .warlock {
-webkit-animation: lets-fight-clash-m .5s linear forwards!important;
}
@-webkit-keyframes lets-fight-clash-m {
0% { transform: translateX(0vw);}
40%, 80% { transform: translateX(-16vw);}
100% { transform: translateX(-40vw);}
}
#sc8h:checked ~ * .hero-e-l{
margin: 45vw 0 0 10vw!important;;
display: block;
-webkit-animation: head-on-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-m {
0% { transform: translate(0vw,0vw);}
40%, 80% { transform: translate(20vw,0vw);}
100% { transform: translate(-5vw,0vw);}
}
#sc8h:checked ~ * .sword{
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: head-on-swing-m .5s linear forwards!important;
}
@-webkit-keyframes head-on-swing-m {
0% { transform: translate(0vw,0vw) rotate(0deg);}
40%, 80% { transform: translate(20vw,0vw) rotate(40deg);}
100% { transform: translate(-5vw,0vw) rotate(0deg);}
}
#sc8i:checked ~ * .sword {
-webkit-animation-delay:.4s!important;
}
@-webkit-keyframes come-get-some-m {
0% { transform: translateX(0vw);}
40% { transform: translateX(16vw);}
80% { transform: translateX(16vw);}
100% { transform: translateX(-10vw);}
}
#sc8i:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
}
#sc8i:checked ~ * .warlock,
#sc8j:checked ~ * .warlock {
-webkit-animation: doom-m .3s linear forwards!important;
}
@-webkit-keyframes doom-m {
0% { transform: translateX(-16vw);}
100% { transform: translateX(-40vw);}
}
#sc8j:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
-webkit-animation-delay:.5s;
}
#sc8k:checked ~ * .sword {
display: block;
-webkit-transform-origin: 50% 80%;
-webkit-animation: caught-it .35s linear forwards;
}
#sc8k:checked ~ * .hero-e-l{
margin: 45vw 0 0 10vw!important;
-webkit-animation: none;
}
#sc8k:checked ~ * .warlock,
#sc8l:checked ~ * .warlock {
margin:32vw 0 0 20vw!important;
}
#sc8k:checked ~ * .final-blast{
margin: 50vw 0 0 15vw!important;
}
#sc8k:checked ~ * .hero-w-l{
-webkit-animation: poof .3s linear forwards;
}
#sc8l:checked ~ * .hero-e-l {
margin: 45vw 0 0 10vw!important;
}
#sc8l:checked ~ * .sword{
display: block;
margin: 40vw 0 0 15vw!important;
}
}
/************* -webkit-animations *************/
/* Generic -webkit-animations */
@-webkit-keyframes fade-in {
0% {opacity: 0; visibility: hidden; overflow: hidden;}
100% {opacity: 1; visibility: visible; overflow: visible;}
}
@-webkit-keyframes entrance-t {
0% {opacity: 0; transform: translateY(-15em);}
10% {opacity: 1; }
100% {transform: translateY(0)}
}
@-webkit-keyframes entrance-r {
0% {transform: translateX(260px);}
100% {transform: translateX(0);}
}
@-webkit-keyframes entrance-b {
0% {transform: translateY(285px);}
100% {transform: translateY(0);}
}
@-webkit-keyframes entrance-l {
0% {transform: translateX(-260px);}
100% {transform: translateX(0);}
}
@-webkit-keyframes sprite {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
@-webkit-keyframes sprite-rev {
0% {background-position-x: 1000%;}
100% {background-position-x: 0%;}
}
/* sc 0 -webkit-animations */
@-webkit-keyframes logo {
0% {opacity: 0;transform: translateY(-50px);}
100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes blink {
0% {opacity: 1.0;}
50% {opacity: 0.0;}
100% {opacity: 1.0;}
}
/* sc 1 -webkit-animations */
@keyframes snow{
0%{transform:translate(0,0);opacity:0;}
10%, 90% {opacity:1;}
50%{transform:translate(-100px,500px);opacity:.2;}
100%{transform:translate(0,500px);opacity:0;}
}
@-webkit-keyframes jump-for-joy {
0%,100% {transform: translateY(0px);}
50% {transform: translateY(-1.5em);}
}
/* sc 2 -webkit-animations */
@-webkit-keyframes shot-fired {
0%, 100% {opacity:0;}
5%, 95% {opacity:1;}
6% {transform:scale(0.2,0.3)}
10% {transform:scale(1,1);}
50% {transform:translate(115px,0px);}
}
@-webkit-keyframes target-accuired {
0%, 100% {opacity:0;}
5%, 99% {opacity:1;}
6% {transform:scale(0.2,0.3);}
10% {transform:scale(1,1);}
98% {transform:translate(115px,0px);}
}
@-webkit-keyframes shield-me-up {
0%, 100% {opacity:0;}
1%, 99% {opacity:1;}
2% {transform:scaleX(0.1);}
5% {transform:scaleX(1);}
97% {transform:scaleX(1);}
98% {transform:scaleX(0.1);}
}
@-webkit-keyframes smoke-the-cat {
0%, 4%, 8%, 12% {opacity: 1;}
2%, 6%, 10% {opacity: .7;}
20%, 100% {opacity: 0;}
}
/* sc 3 -webkit-animations */
@-webkit-keyframes body-shot {
0% { transform: translateX(0px);}
100% { transform: translateX(-700px);}
}
/* sc 4 -webkit-animations */
@-webkit-keyframes transport-in {
0%, 5%, 15%, 25%, 100% {opacity: 1;}
1%, 10%, 20% {opacity: 0;}
}
@-webkit-keyframes transport-out {
0%, 10%, 20% {opacity: 1;}
5%, 15%, 25%, 100% {opacity: 0;}
}
@-webkit-keyframes out-l {
0% { transform: translateX(0px);}
100% { transform: translateX(-700px);}
}
@-webkit-keyframes in-r {
0% { transform: translateX(700px);}
100% { transform: translateX(0px);}
}
@-webkit-keyframes boo {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
@-webkit-keyframes back-up-mofo {
0% {background-position-x: 100%;}
75% {background-position-x: 100%;}
100% {background-position-x: 0%;}
}
@-webkit-keyframes jump-f {
0% { opacity:1; transform: translate(0vw, 0vw);}
45% { opacity:1; transform: translate(70px, -70px);}
90% { opacity:1; transform: translate(140px, 0vw);}
100% { opacity:0; transform: translate(140px, 0vw);}
}
@-webkit-keyframes jump-b {
0%, 100% { transform: translateX(0px);}
50% { transform: translateX(-30px);}
}
@-webkit-keyframes twinkie-in-the-hole {
0% { opacity:1; transform: translate(0px, 0px) rotate(0deg);}
45% { opacity:1; transform: translate(70px, -70px) rotate(360deg);}
90% { opacity:1; transform: translate(140px, 0px) rotate(720deg);}
100% { opacity:0; transform: translate(140px, 0px) rotate(720deg);}
}
@-webkit-keyframes gotcha {
0%, 100% { transform: translateY(-700px);}
20% { transform: translateY(100px);}
}
@-webkit-keyframes take-that {
0% { transform: translateY(0px);}
15% { transform: translateY(80px);}
30% { transform: translateY(0px);}
100% { transform: translateY(-700px);}
}
@-webkit-keyframes suprise {
0% {-webkit-transform: translateY(-500px);}
20% {-webkit-transform: translateY(30px);}
50%, 60%, 80%, 100% {-webkit-transform: translateY(0px);}
40% {-webkit-transform: translateY(-60px);}
}
@-webkit-keyframes bites-the-dust {
0%, 20% { transform: translate(0px, 0px);}
100% { transform: translate(0px, -700px);}
}
@-webkit-keyframes swing {
0% { transform: rotate(-60deg);}
100% { transform: rotate(80deg);}
}
@-webkit-keyframes swing-two {
0% { transform: rotate(-60deg);}
100% { transform: rotate(80deg);}
}
@-webkit-keyframes web-sling {
0% { opacity: 1; transform: translate(2em, -8em);}
75%, 85%, 95% {opacity: 1;}
80%, 90%, 100% {opacity: 0;}
100% { opacity: 0; transform: translate(0em, 0em);}
}
@-webkit-keyframes web-sling-two {
0% { transform: translate(2em, -8em);}
10%, 20% { transform: translate(0em, 0em);}
100% { transform: translate(0px, -700px);}
}
/* sc 5 -webkit-animations */
@-webkit-keyframes eject {
0% {transform: translate(0px,0px) rotate(0deg);}
30% {transform: translate(60px,-150px) rotate(90deg);}
100% {transform: translate(120px,300px) rotate(720deg);}
}
@-webkit-keyframes eject-hero {
0% {transform: translate(0px,0px) rotate(0deg);}
30% {transform: translate(-60px,-150px) rotate(90deg);}
100% {transform: translate(-120px,300px) rotate(720deg);}
}
/* sc 6 -webkit-animations */
@-webkit-keyframes boulder-n-roll {
0%, 10% {transform: translate(0px,0px) rotate(0deg);}
2%, 6% {transform: translate(5px,0px) rotate(0deg);}
4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
12%, 16%, 20% {transform: translate(10px,0px) rotate(0deg);}
14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
100% {transform: translate(480px,400px) rotate(720deg);}
}
@-webkit-keyframes boulder-n-roll-is-dead {
0%, 10% {transform: translate(0px,0px) rotate(0deg);}
2%, 6% {transform: translate(5px,0px) rotate(0deg);}
4%, 8% {transform: translate(-5px,0px) rotate(0deg);}
12%, 16%, 20% {transform: translate(10px,0px) rotate(0deg);}
14%, 18% {transform: translate(-10px,0px) rotate(0deg);}
100% {transform: translate(0px,400px) rotate(720deg);}
}
/* sc 7 -webkit-animations */
@-webkit-keyframes tree {
0% {transform: translate(0px,0px)}
100% {transform: translate(100px,-60px)}
}
@-webkit-keyframes toad {
0% {transform: translate(0px,0px)}
100% {transform: translate(100px,60px)}
}
@-webkit-keyframes dodge {
0% { transform: translateX(0px);}
100% { transform: translateX(-50px);}
}
@-webkit-keyframes hero-attack {
0% {transform: translate(100px,-60px)}
90% {opacity:1;transform: translate(180px,0px)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(270px,0px)}
}
@-webkit-keyframes hero-attack-two {
0% {transform: translate(0px,0px)}
10% {opacity:1;transform: translate(100px,-60px)}
90% {opacity:1;transform: translate(100px,-60px)}
100% {opacity:1;transform: translate(0px,-120px)}
}
@-webkit-keyframes sword-attack {
0% {transform: translate(0px,0px)}
90% {opacity:1;transform: translate(80px,60px)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(170px,60px)}
}
@-webkit-keyframes sword-attack-two {
0% {transform: translate(0px,0px) rotate(0deg)}
10% {transform: translate(100px,-60px) rotate(0deg)}
12% {transform: translate(100px,-60px) rotate(-60deg)}
20% {transform: translate(100px,-60px) rotate(80deg)}
30% {transform: translate(100px,-60px) rotate(0deg)}
90% {transform: translate(100px,-60px) rotate(0deg)}
100% {transform: translate(0px,-120px) rotate(0deg)}
}
@-webkit-keyframes toad-turn {
0%, 44% {transform: scaleX(-1)}
45%, 100% {transform: scaleX(1)}
}
@-webkit-keyframes toad-attack {
0% {opacity:0; transform: scale(0,1);}
5% {opacity:1; transform: scale(.2,1);}
80% {opacity:1; transform: scale(1.5,1);}
90% {opacity:1; transform: scale(.5,1);}
100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes toad-tree {
0% {opacity:0; transform: rotate(20deg) scale(0,1);}
10% {opacity:1; transform: rotate(20deg) scale(2,1);}
90% {opacity:1; transform: rotate(20deg) scale(2,1);}
100% {opacity:1; transform: rotate(20deg) scale(1,1);}
}
@-webkit-keyframes roll-tree {
0%, 90% {transform: translate(0px,0px)}
100% {transform: translate(7em, 3em)}
}
@-webkit-keyframes toad-attack-long {
0%, 40% {opacity:0; transform: scale(0,1);}
50%, 70% {opacity:1; transform: scale(3.4,1);}
80% {opacity:1; transform: scale(.5,1);}
98% {opacity:1; transform: scale(0,1);}
100% {opacity:0; transform: scale(0,1);}
}
@-webkit-keyframes runaway {
0% {transform: translate(0px,0px)}
50%, 70% {transform: translate(-150px,-60px)}
80% {opacity:1; transform: translate(140px,-60px)}
98% {opacity:.8;}
100% { opacity:0; transform: translate(180px,-60px)}
}
/* sc 8 -webkit-animations */
@-webkit-keyframes blast-r-one {
0% { transform: translateX(0em);}
100% { transform: translateX(-70em);}
}
@-webkit-keyframes blast-r-two {
0% { transform: translateX(0em);}
100% { transform: translateX(-70em);}
}
@-webkit-keyframes blast-death {
0% { transform: translateX(0em);}
95% { transform: translateX(-18em);}
100% {opacity: 0; transform: translateX(-18em);}
}
@-webkit-keyframes move-on-up {
0%, 100% { transform: translateY(0em);}
50% { transform: translateY(-5em);}
}
@-webkit-keyframes lets-fight {
0% { transform: translateX(0em);}
40%, 80% { transform: translateX(-11em);}
100% { transform: translateX(-5em);}
}
@-webkit-keyframes lets-fight-clash {
0% { transform: translateX(0em);}
40%, 80% { transform: translateX(-11em);}
100% { transform: translateX(-22em);}
}
@-webkit-keyframes doom {
0% { transform: translateX(-10em);}
100% { transform: translateX(-22em);}
}
@-webkit-keyframes spin-out {
0% {transform: translate(0em,0em) rotate(0deg);}
50% {transform: translate(-6em,-6em) rotate(360deg);}
100% {transform: translate(-20em,-2.5em) rotate(720deg);}
}
@-webkit-keyframes death {
0%, 20%, 60% {opacity: 1;}
10%, 40%, 80% {opacity: .3;}
100% {opacity: .0;)}
}
@-webkit-keyframes head-on {
0% { transform: translate(0em,0em);}
40%, 80% { transform: translate(8em,0em);}
100% { transform: translate(-5em,0em);}
}
@-webkit-keyframes head-on-swing {
0% { transform: translate(0em,0em) rotate(0deg);}
40%, 80% { transform: translate(8em,0em) rotate(30deg);}
100% { transform: translate(-5em,0em) rotate(0deg);}
}
@-webkit-keyframes sword-clash{
0% { transform: rotate(-60deg);}
100% { transform: rotate(80deg);}
}
@-webkit-keyframes caught-it{
0% { transform: rotate(-60deg);}
70% { transform: rotate(80deg);}
100% {transform: translate(-20em,-2.5em) rotate(720deg);}
}
@-webkit-keyframes final-blast {
0% {opacity: 1; transform: translateX(0em);}
50% {opacity: 1; transform: translateX(-5em);}
100% {opacity: 0; transform: translateX(-5em);}
}
@-webkit-keyframes poof {
0% {opacity: 1;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes final-blow{
0% { transform: rotate(0deg);}
100% { transform: rotate(-330deg);}
}
@-webkit-keyframes final-death{
0% { opacity: 1; transform: translate(0em,0em) rotate(0deg);}
10% { transform: translate(-5em,0em) rotate(0deg);}
80% { opacity: 1; transform: translate(20em,-15em) rotate(-330deg);}
100% { opacity: 0; transform: translate(25em,0em) rotate(-180deg);}
}
@-webkit-keyframes let-there-be-light{
0% {background: #21022d;}
100% {background: #61d1ff;}
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
.hide, input {display:none!important;max-height:0;line-height:0;height:0;overflow:hidden;mso-hide:all;mso-line-hight-rule:exact; visibility: hidden;}
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
table, .fluid {width: 100%!important;}
.w-100 {width:100%!important; height:auto!important;}
.w-90 {width:90%!important; height:auto!important;}
.w-80 {width:80%!important; height:auto!important;}
.w-70 {width:70%!important; height:auto!important;}
.w-60 {width:60%!important; height:auto!important;}
.w-50 {width:50%!important; height:auto!important;}
.w-40 {width:50%!important; height:auto!important;}
.w-30 {width:50%!important; height:auto!important;}
.w-20 {width:50%!important; height:auto!important;}
.w-10 {width:50%!important; height:auto!important;}
.pd-t {padding:5% 0 0 0!important; height:auto!important;}
.pd-b {padding:0 0 5% 0!important; height:auto!important;}
.pd-tb {padding:5% 0 5% 0!important; height:auto!important;}
.pd-all {padding:5% 5% 5% 5%!important; height:auto!important;}
}
</style>
<style type="text/css">
/********* ESP CLASSES *********/
div, p, a, li, td {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-font-smoothing:antialiased!important;}
body {min-width:100%!important; Margin:0 auto!important; padding:0; background-color:#000000; font-size: 10px;}
#outlook a {padding:0;}
.ReadMsgBody {width:100%;}
.ExternalClass {width:100%;}
.ExternalClass * {line-height:110%;}
table td {padding:0; border-collapse:collapse;}
img {display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; }
/************* COPY STYLES *************/
h1, h2 {
font-family: 'ac_rg', Courier, arial, serif;
font-weight: bold;
line-height: 120%;
color: #ffffff;
margin: 0;
text-decoration: none;
}
a {
line-height: 120%;
color: inherit;
margin: 0;
text-decoration: none;
}
h1 {
font-size: 24px;
padding:5px 5px;
}
h2 {
font-size: 20px;
vertical-align: middle;
}
h2:hover {
color: #000000;
vertical-align: middle;
background-color: #ffffff;
}
a:hover {
color: #000000;
vertical-align: middle;
background-color: #ffffff;
}
p {
font-family: Courier, arial, serif;
font-size: 13px;
line-height: 120%;
color: #ffffff;
margin: 0;
}
/************* ALIGNMENT STYLES *************/
.pd-t {padding:7px 0 0 0!important; height:auto!important;}
.pd-b {padding:0 0 7px 0!important; height:auto!important;}
.pd-tb {padding:7px 0 7px 0!important; height:auto!important;}x
.pd-all {padding:7px 7px 7px 7px!important; height:auto!important;}
/************* COLOUR STYLES *************/
.white {color:#ffffff;}
.black {color:#000000;}
/********* AUTO LINK CLASSES *********/
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
a[href^='tel'], a[href^='sms'], a[href^='mailto'] {
color:inherit!important;
cursor:default!important;
text-decoration:none!important;
}
.loads {
background-image:
url(http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-0_1.jpg),
url(http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-1_2.jpg),
url(http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-2_3.jpg),
url(http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-3_4.jpg),
url(http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-4_5.jpg),
url(http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-5_6.jpg),
url(http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-6_7.jpg),
url(http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-7_8.jpg),
url(http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-8_9.png);
}
</style>
<style type="text/css">
/*** Arcade Classic ***/
@font-face {
font-family:'ac_rg';
src: url('https://s3-eu-west-1.amazonaws.com/chs-fonts/test-fonts/ArcadeClassic.eot');
src: url('https://s3-eu-west-1.amazonaws.com/chs-fonts/test-fonts/ArcadeClassic.eot?#iefix') format('embedded-opentype'),
url('https://s3-eu-west-1.amazonaws.com/chs-fonts/test-fonts/ArcadeClassic.woff') format('woff'),
url('https://s3-eu-west-1.amazonaws.com/chs-fonts/test-fonts/ArcadeClassic.ttf') format('truetype'),
url('https://s3-eu-west-1.amazonaws.com/chs-fonts/test-fonts/ArcadeClassic.svg#ArcadeClassic') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body class="body" bgcolor="#000000" style="font-size: 10px; image-rendering: pixelated;">
<div style="display: none; max-height: 0px; overflow: hidden;">
Your SuperMailQuest adventure begins now...
</div>
<div style="display: none; max-height: 0px; overflow: hidden;">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" bgcolor="#000000" style="table-layout: fixed;">
<tr>
<td style="font-size:0px;"> </td>
<td class="fluid" align="center" width="600" bgcolor="#000000">
<!--[if mso]><!-->
<input class="hide" type="radio" id="interactive" checked="checked" >
<!--<![endif]-->
<div class="wrapper">
<div class="fallback">
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="width:600px; background-color:#000000;">
<tr>
<td align="center">
<img class="w-100" src="http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-0-fallback_10.jpg" width="600" alt="Fallback Image" border="0" style="width: 600px;"/>
</td>
</tr>
<tr>
<td align="left" style="padding: 25px;">
<table width="550" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="width:550px;">
<tr>
<td align="left" bgcolor="#313761" style="padding: 15px; border: 5px solid #ffffff; border-style: outset; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ">
<table width="520" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="width:520px;">
<tr>
<td align="center" style="font-family: 'ac_rg', Courier, arial, serif; font-size: 24px; font-weight: bold; line-height: 24px; padding-bottom:15px; color: #ffffff; text-align: center">
<h1 style="font-size: 24px; line-height: 24px; padding:0; margin:0; ">Welcome #emailgeek!</h1>
</td>
</tr>
<tr>
<td align="center" style="font-family: Courier, arial, serif; font-size: 13px; line-height: 16px; padding:5px 5px; color: #ffffff; margin: 0; text-align: center">
<p style="font-size: 13px; line-height: 16px; padding:0; margin:0;">Alas! The ESP you've chosen does not support the magical power of –webkit–. As such the evil warlock of Outlook mountain has already laid claim to this realm. Please portal yourself over to the Realms of Chrome, Firefox or iOS to rally to the cause.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]><!-->
<div class="game" style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
<input class="hide" type="radio" name="sc" id="sc0" checked="checked"/>
<input class="hide" type="radio" name="sc" id="sc1" />
<input class="hide" type="radio" name="sc" id="sc1b" />
<input class="hide" type="radio" name="sc" id="sc2" />
<input class="hide" type="radio" name="sc" id="sc2b" />
<input class="hide" type="radio" name="sc" id="sc2c" />
<input class="hide" type="radio" name="sc" id="sc2d" />
<input class="hide" type="radio" name="sc" id="sc3" />
<input class="hide" type="radio" name="sc" id="sc3b" />
<input class="hide" type="radio" name="sc" id="sc3c" />
<input class="hide" type="radio" name="sc" id="sc3d" />
<input class="hide" type="radio" name="sc" id="sc3e" />
<input class="hide" type="radio" name="sc" id="sc3f" />
<input class="hide" type="radio" name="sc" id="sc3g" />
<input class="hide" type="radio" name="sc" id="sc4" />
<input class="hide" type="radio" name="sc" id="sc4a1" />
<input class="hide" type="radio" name="sc" id="sc4a2" />
<input class="hide" type="radio" name="sc" id="sc4b" />
<input class="hide" type="radio" name="sc" id="sc4b1" />
<input class="hide" type="radio" name="sc" id="sc4b2" />
<input class="hide" type="radio" name="sc" id="sc4b3" />
<input class="hide" type="radio" name="sc" id="sc4b4" />
<input class="hide" type="radio" name="sc" id="sc4b5" />
<input class="hide" type="radio" name="sc" id="sc4b6" />
<input class="hide" type="radio" name="sc" id="sc4c" />
<input class="hide" type="radio" name="sc" id="sc4c1" />
<input class="hide" type="radio" name="sc" id="sc4c2" />
<input class="hide" type="radio" name="sc" id="sc4d" />
<input class="hide" type="radio" name="sc" id="sc4d1" />
<input class="hide" type="radio" name="sc" id="sc4d2" />
<input class="hide" type="radio" name="sc" id="sc4d3" />
<input class="hide" type="radio" name="sc" id="sc4d4" />
<input class="hide" type="radio" name="sc" id="sc4d5" />
<input class="hide" type="radio" name="sc" id="sc4d6" />
<input class="hide" type="radio" name="sc" id="sc4e" />
<input class="hide" type="radio" name="sc" id="sc4e1" />
<input class="hide" type="radio" name="sc" id="sc4e2" />
<input class="hide" type="radio" name="sc" id="sc5" />
<input class="hide" type="radio" name="sc" id="sc5b" />
<input class="hide" type="radio" name="sc" id="sc5c" />
<input class="hide" type="radio" name="sc" id="sc5d" />
<input class="hide" type="radio" name="sc" id="sc5e" />
<input class="hide" type="radio" name="sc" id="sc5f" />
<input class="hide" type="radio" name="sc" id="sc6"/>
<input class="hide" type="radio" name="sc" id="sc6b" />
<input class="hide" type="radio" name="sc" id="sc6c" />
<input class="hide" type="radio" name="sc" id="sc6d" />
<input class="hide" type="radio" name="sc" id="sc6e" />
<input class="hide" type="radio" name="sc" id="sc6f" />
<input class="hide" type="radio" name="sc" id="sc6g" />
<input class="hide" type="radio" name="sc" id="sc6h" />
<input class="hide" type="radio" name="sc" id="sc6i" />
<input class="hide" type="radio" name="sc" id="sc7" />
<input class="hide" type="radio" name="sc" id="sc7b" />
<input class="hide" type="radio" name="sc" id="sc7c" />
<input class="hide" type="radio" name="sc" id="sc7d" />
<input class="hide" type="radio" name="sc" id="sc7e" />
<input class="hide" type="radio" name="sc" id="sc7f" />
<input class="hide" type="radio" name="sc" id="sc7g" />
<input class="hide" type="radio" name="sc" id="sc8" />
<input class="hide" type="radio" name="sc" id="sc8b" />
<input class="hide" type="radio" name="sc" id="sc8c" />
<input class="hide" type="radio" name="sc" id="sc8d" />
<input class="hide" type="radio" name="sc" id="sc8e" />
<input class="hide" type="radio" name="sc" id="sc8f" />
<input class="hide" type="radio" name="sc" id="sc8g" />
<input class="hide" type="radio" name="sc" id="sc8h" />
<input class="hide" type="radio" name="sc" id="sc8i" />
<input class="hide" type="radio" name="sc" id="sc8j" />
<input class="hide" type="radio" name="sc" id="sc8k" />
<input class="hide" type="radio" name="sc" id="sc8l" />
<div class="loads hide" style="width: 0px; height: 0px; max-height: 0;"></div>
<div>
<!-- sc-0 -->
<div class="sc sc0">
<div class="bg-sc bg-0" align="center">
<div align="center" class="logo">
<img class="w-90" src="http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/logo-super-mail-quest_11.png" alt="Super Mail Quest" width="500" style="width:500px; display: block" />
</div>
<div align="center" class="hero-container"></div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div class="sc-0-ui">
<h1 class="pd-b">Welcome #emailgeek!</h1>
<p style="padding: 0 0 20px 0;">Adventure awaits! The land of Emailia is a dangerous one, full of choice and consequence. Can you aid our intrepid hero, and help him navigate his way through the realm to defeat the Evil Warlock of Outlook mountain?</p>
<label for="sc1"><h2 class="pd-tb">Start game</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-0 END -->
<!-- sc-1 -->
<div class="sc sc1" >
<div class="bg-sc bg-1" align="center">
<div class="fireworks">
<div class="hero-e-t">
<div class="hero-w-t"></div>
</div>
<div class="grandolf">
<img src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-grandolf_13.gif" alt="Grandolf the Grump" width="60" style="width:60px; display: block" />
</div>
<div class="dmarkster">
<div class="fade-in">
<img src="http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mjr_14.gif" alt="Dungeon Markster" width="50" style="width:50px; display: block" />
</div>
</div>
<div class="obiwon">
<img src="http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-obiwon_15.gif" alt="Obiwon Kanoobe" width="60" style="width:60px; display: block" />
</div>
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-1a">
<p class="pd-b white">Your quest begins in the humble town of Tableton. Two rowd's stand before you (pun intended). The first leads to the Forest of Div, a dark and foreboding forest where many an adventurer has met his fate. The second path meanders you past the river of Teadee</p>
<label for="sc2"><h2 class="pd-tb">Go left to the Forest of Div</h2></label>
<label for="sc3"><h2 class="pd-tb">No, go right along the river of Teadee</h2></label>
</div>
<div id="ct-1b">
<p class="pd-b white">You return victorious from Outlook Mountain. The dark presence that once overshadowed the land of emailia has now been lifted and the grateful town of Tableton celebrate your name. Feel good #emailgeek, a good deed has been done</p>
<h2 class="pd-tb"><a href="/login?redirect_after_login=%2Fhome%3Fstatus%3DRest%2Beasy%2Bfellow%2B%2523emailgeeks%252C%2BThe%2B%2527Warlock%2Bof%2BOutlook%2BMountain%2527%2Bhas%2Bbeen%2Bdefeated.%2BBards%2Bwill%2Bsing%2Byour%2Bname%2Bfor%2Byears%2Bto%2Bcome%2B%2540SuperMailQuest" target="_blank">Call the Herald, send out the pigeons. The Warlock has perished, long live the interactive email!</a></h2>
</div>
</div>
</div>
</div>
</div>
<!-- sc-1 END -->
<!-- sc-2 -->
<div class="sc sc2" >
<div class="bg-sc bg-2" align="center">
<div id="poof"></div>
<div id="laser">
<img src="http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/laser_16.png" alt="Lazorrr" width="50" style="width:50px; display: block" />
</div>
<div id="spam">
<img src="http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/shield_17.gif" alt="Super Duper Spam Shield" width="30" style="width:30px; display: block" />
</div>
<div class="cat">
<img src="http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-sabre-kitty_18.gif" alt="Shrodinger" width="100" style="width:100px; display: block" />
</div>
<div class="hero-e-r">
<div class="hero-w-r"></div>
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-2a">
<p class="pd-b white">From out of nowhere you're set upon by an escaped "Schrodinger" who has taken sudden offence to your existence... do you:</p>
<label for="sc2b"><h2 class="pd-tb">ATTACK!!</h2></label>
<label for="sc3"><h2 class="pd-tb">RUN AWAY!</h2></label>
</div>
<div id="ct-2b">
<p class="pd-b white">You charge at the furry menace only to see it ready it's special "mailblast" attack. you have only seconds to react... do you:</p>
<label for="sc2c"><h2 class="pd-tb">Dodge the oncoming blast by jumping into the undergrowth.</h2></label>
<label for="sc2d"><h2 class="pd-tb">Block the attack with your shield of anti-spam.</h2></label>
</div>
<div id="ct-2c">
<p class="pd-b white">You attempt to dodge the blast but it is simply too huge... you are shredded into a thousand pieces.</p>
<label for="sc1"><h2 class="pd-tb">Mail the pieces of your corpse back to the castle.</h2></label>
</div>
<div id="ct-2d">
<p class="pd-b white">You successfully reflect the attack back onto the surprised feline. The blast vapourises the creature in a puff of smoke... all is suddenly quiet in the forest.</p>
<label for="sc5"><h2 class="pd-tb">Bask in your awesomeness for a moment, then carry on your journey.</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-2 END -->
<!-- sc-3 -->
<div class="sc sc3" >
<div class="bg-sc bg-3" align="center">
<div class="grandolf">
<img src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-grandolf_13.gif" alt="Grandolf the Grump" width="60" style="width:60px; display: block" />
</div>
<div class="hero-e-l">
<div class="hero-w-l"></div>
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-3a">
<p class="pd-b white">You come to a small cottage on the edge of the river, a bearded man with a pointy hat stands in your way shouting "YOU SHALL NOT PASS!!" do you:</p>
<label for="sc3b"><h2 class="pd-tb">Greetings old man... I am on an important quest, please step aside.</h2></label>
<label for="sc2"><h2 class="pd-tb">*shrug* and head back the other way.</h2></label>
</div>
<div id="ct-3b">
<p class="pd-b white">"YOU SHALL NOT PASS!!" he says again... "Unless you answer me these riddles three"...</p>
<label for="sc3g"><h2 class="pd-tb">Force your way past the old git</h2></label>
<label for="sc3c"><h2 class="pd-tb">"Ask me your first question old man"</h2></label>
</div>
<div id="ct-3c">
<p class="pd-b white">
Doomed to run from place to place<br/>
Ever chasing, ever chased<br/>
And though I'm always travelling<br/>
I rarely change the place I'm in</p>
<label for="sc3g"><h2 class="pd-tb">The wind</h2></label>
<label for="sc3d"><h2 class="pd-tb">A river</h2></label>
</div>
<div id="ct-3d">
<p class="pd-b white">This thing all things devours: Birds, beasts, trees, flowers; Gnaws iron, bites steel; Grinds hard stones to meal; Slays king, ruins town, And beats high mountain down.</p>
<label for="sc3e"><h2 class="pd-tb">Time</h2></label>
<label for="sc3g"><h2 class="pd-tb">Space</h2></label>
</div>
<div id="ct-3e">
<p class="pd-b white">Whoever makes it tells it not. Whoever takes it knows it not. Whoever knows it, wants it not. What am I?.</p>
<label for="sc3g"><h2 class="pd-tb">Money</h2></label>
<label for="sc3f"><h2 class="pd-tb">Poison</h2></label>
</div>
<div id="ct-3f">
<p class="pd-b white">"YOU SHALL PASS!!"</p>
<label for="sc7"><h2 class="pd-tb">You cautiously walk past the old man to carry on your journey.... however you cant shake the feeling you've seen him somewhere before.</h2></label>
</div>
<div id="ct-3g">
<p class="pd-b white">"EXPECTO TRANSFORMUS" – A mystical force hits you fully in the <body>. You are knocked unconscious and thrown backwards by the blast</p>
<label for="sc1"><h2 class="pd-tb">URRGGGHH... </h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-3 END -->
<!-- sc-4 -->
<div class="sc sc4" >
<div class="bg-sc bg-4" align="center">
<div class="dmarkster">
<img src="http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-mjr_14.gif" alt="Dungeon Markster" width="50" style="width:50px; display: block" />
</div>
<div class="spidey-shield">
<img src="http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/shield_17.gif" alt="Super Duper Spam Shield" width="30" style="width:30px; display: block" />
</div>
<div class="spidey-sword spidey-sword2">
<img src="http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/sword_19.png" alt="Sword" width="25" style="width:25px; display: block" />
</div>
<div class="web">
<img id="web-img" src="http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/web_20.png" alt="Spidey Web" width="60" style="width:60px; display: block" />
</div>
<div class="spidey">
<img src="http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-spider_21.gif" alt="Spidey" width="175" style="width:175px; display: block" />
</div>
<div class="twinkie">
<img src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/twinkie_22.png" alt="Twinkie" width="60" style="width:60px; display: block" />
</div>
<div class="mimic-cont">
<div class="mimic"></div>
</div>
<div class="lh-wall">
<img src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/lh-wall_23.png" alt="Left wall" width="70" style="width:70px; display: block" />
</div>
<div class="rh-wall">
<img src="http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/rh-wall_24.png" alt="Right wall" width="70" style="width:70px; display: block" />
</div>
<div align="center" class="dungeon-ts">
<div class="ts-1">
<img src="http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ts-1_25.png" alt="Dungeon decor" width="194" style="width:194px; display: block" />
</div>
<div class="ts-2">
<img src="http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ts-2_26.png" alt="Dungeon decor" width="194" style="width:194px; display: block" />
</div>
<div class="ts-3">
<img src="http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ts-3_27.png" alt="Dungeon decor" width="194" style="width:194px; display: block" />
</div>
<div class="ts-4">
<img src="http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ts-4_28.png" alt="Dungeon decor" width="194" style="width:194px; display: block" />
</div>
<div class="ts-5">
<img src="http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-motif_29.png" alt="Motif" width="94" style="width:94px; display: block" />
</div>
</div>
<div align="center" class="dungeon-ms">
<div class="ms-1">
<img src="http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-1_30.png" alt="Dungeon decor" width="195" style="width:195px; display: block" />
</div>
<div class="ms-2">
<img src="http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-2_31.png" alt="Dungeon decor" width="195" style="width:195px; display: block" />
</div>
<div class="ms-3">
<img src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-3_32.png" alt="Dungeon decor" width="195" style="width:195px; display: block" />
</div>
<div class="ms-4">
<img src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-4_33.png" alt="Dungeon decor" width="195" style="width:195px; display: block" />
</div>
<div class="ms-p1">
<img src="http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-p1_34.gif" alt="Portal 1" width="195" style="width:195px; display: block" />
</div>
<div class="ms-p2">
<img src="http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-sc4-ms-p2_35.gif" alt="Portal 2" width="195" style="width:195px; display: block" />
</div>
</div>
<div class="hero-e-l">
<div class="hero-w-l"></div>
</div>
<div class="hero-e-b">
<div class="hero-w-b"></div>
</div>
<div class="lvl-up">
<img src="http://i6.cmail20.com/ei/j/8A/D18/873/044703/csimport/lvl-up_36.png" alt="Level up" width="195" style="width:195px; display: block" />
</div>
<div class="lair">
<img src="http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/bkg-scene-4d_37.png" alt="Spiders lair" width="600" style="width:600px; display: block" />
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<!-- sc-4a -->
<div id="ct-4a">
<p class="pd-b white">You enter the dimly lit dungeon, the smell of stale air assaults your sense's. From out of nowhere, a man appears before..."Greetings adventurer"</p>
<label for="sc4a1"><h2 class="pd-tb">Err...hi!?</h2></label>
</div>
<div id="ct-4a1">
<p class="pd-b white">"Welcome to Outlook dungeon, the penultimate hurdle of your quest. To get to the warlock you must traverse all three levels to reach the mountain summit. but beware, the path will not be easy."</p>
<label for="sc4a2"><h2 class="pd-tb">Thanks for the heads up... but who are you?</h2></label>
</div>
<div id="ct-4a2">
<p class="pd-b white">Before you receive an answer the man disappears...</p>
<label for="sc4b"><h2 class="pd-tb">Carry on along the corridor</h2></label>
</div>
<!-- sc-4b -->
<div id="ct-4b">
<p class="pd-b white">The corridor abruptly ends, a set of stairs leads upwards. However you notice a large golden chest at the back of the dungeon.</p>
<label for="sc4c"><h2 class="pd-tb">Ignore the chest and carry on up the stairs (i'm not here to get rich)</h2></label>
<label for="sc4b1"><h2 class="pd-tb">Go to open the chest, a little curiosity (and extra loot) never hurt anyone</h2></label>
</div>
<div id="ct-4b1">
<p class="pd-b white">You move towards the chest, suddenly, before you have a chance to react, the chest transforms. You need to react quickly do you:</p>
<label for="sc4b2"><h2 class="pd-tb">Jump backwards</h2></label>
<label for="sc4b5"><h2 class="pd-tb">Jump forwards</h2></label>
</div>
<div id="ct-4b2">
<p class="pd-b white">You narrowly miss getting eaten whole. However your path is now blocked by a ravenous Mimic beast. Do you:</p>
<label for="sc4b5"><h2 class="pd-tb">ATTACK!</h2></label>
<label for="sc4b3"><h2 class="pd-tb">Search your backpack for help</h2></label>
</div>
<div id="ct-4b3">
<p class="pd-b white">You scrummage in your pack and find only a sealed 1930's twinkie. The beast looms closer do you:</p>
<label for="sc4b4"><h2 class="pd-tb">Throw the twinkie bar at the beast</h2></label>
<label for="sc4b6"><h2 class="pd-tb">leap over the beast</h2></label>
</div>
<div id="ct-4b4">
<p class="pd-b white">The Mimic beast swallows the twinkie whole and is suddenly calmer. It settles down, moving back to where it came from.</p>
<label for="sc4c"><h2 class="pd-tb">run up the stairs before it changes its mind.</h2></label>
</div>
<div id="ct-4b5">
<p class="pd-b white">The dangerous beast makes short work of you and promptly eats you whole.</p>
<label for="sc1"><h2 class="pd-tb">You discover a new definition of pain and suffering as you are slowly digested over a thousand years</h2></label>
</div>
<div id="ct-4b6">
<p class="pd-b white">You valiantly leap over the mimic, but your salmon like jump falls short. You fall directly into the waiting maw of the beast.</p>
<label for="sc1"><h2 class="pd-tb">You discover a new definition of pain and suffering as you are slowly digested over a thousand years.</h2></label>
</div>
<!-- sc-4c -->
<div id="ct-4c">
<p class="pd-b white">"Hello again adventurer."</p>
<label for="sc4c1"><h2 class="pd-tb">"How did you get here?"</h2></label>
</div>
<div id="ct-4c1">
<p class="pd-b white">"It matters not, continue on your path and remember the right road is not always the left."</p>
<label for="sc4c2"><h2 class="pd-tb">Eh? what does that mean?</h2></label>
</div>
<div id="ct-4c2">
<p class="pd-b white">The man disappears again...</p>
<label for="sc4d"><h2 class="pd-tb">Continue down the corridor.</h2></label>
</div>
<!-- sc-4d -->
<div id="ct-4d">
<p class="pd-b white">You carry on down the corridor which starts to become thick with webs, you see the stairs to the next level. However the room appears eerily silent and you cant help the feeling your being watched.</p>
<label for="sc4d4"><h2 class="pd-tb">Make a quick dash towards the stairs</h2></label>
<label for="sc4d1"><h2 class="pd-tb">Step cautiously along the corridor</h2></label>
</div>
<div id="ct-4d1">
<p class="pd-b white">Your cautiousness pays off, a large dark shape drops from the ceiling and tries to grab you but you narrowly escape being grabbed. you can now see your assailant, a giant spider looms above you preparing to catch you on its web. Do you:</p>
<label for="sc4d2"><h2 class="pd-tb">Attack!</h2></label>
<label for="sc4d5"><h2 class="pd-tb">Dodge the web</h2></label>
</div>
<div id="ct-4d2">
<p class="pd-b white">You draw your sword in time and manage to slice through the web before getting caught. Realising it's attack has failed the spider moves in close enough to attack you with its poisonous bite. Do you:</p>
<label for="sc4d6"><h2 class="pd-tb">Block the attack</h2></label>
<label for="sc4d3"><h2 class="pd-tb">Stab the oncoming creature</h2></label>
</div>
<div id="ct-4d3">
<p class="pd-b white">Your sword strike rings true and hits the spider clean across its face. It shrieks in pain and quickly retreats to the darkness above.</p>
<label for="sc4e"><h2 class="pd-tb">With the spider gone you move towards the stairs</h2></label>
</div>
<div id="ct-4d4">
<p class="pd-b white">You move swiftly towards the door however from out of nowhere you are grabbed from above by a monstrous spider!</p>
<label for="sc1"><h2 class="pd-tb">You are lifted into the darkness never to be seen again...</h2></label>
</div>
<div id="ct-4d5">
<p class="pd-b white">You try to leap away from the falling web but get stuck in its viscous netting. The Spider quickly secures you with further webbing before grabbing you in it's Jaws.</p>
<label for="sc1"><h2 class="pd-tb">You are lifted into the darkness never to be seen again...</h2></label>
</div>
<div id="ct-4d6">
<p class="pd-b white">You block the attack with your shield but it corrosive venom burns straight through. Defenceless, the spider's jaws clamp onto you and it's poison begins to take effect... </p>
<label for="sc1"><h2 class="pd-tb">You are lifted into the darkness never to be seen again...</h2></label>
</div>
<!-- sc-4e -->
<div id="ct-4e">
<p class="pd-b white">You arrive in the final room. The strange man from before stands in front of 2 portals, one Red, one blue. He smiles and says "Congratulations adventurer, You have arrived at your final test"...</p>
<label for="sc4e1"><h2 class="pd-tb">"Go on..."</h2></label>
</div>
<div id="ct-4e1">
<p class="pd-b white">"I am the Dungeon Markster, welcome to the 'Room of the real'. I am here to guide you in the penultimate part of your quest. Two portals stand before you each with a final location but only one will take you to where you need to be."</p>
<label for="sc4e2"><h2 class="pd-tb">Cavern of the what? Dungeon Who? this makes no sense!!</h2></label>
<label for="sc4e2"><h2 class="pd-tb">"you are BatS@#t Crazy..."</h2></label>
</div>
<div id="ct-4e2">
<p class="pd-b white">"I'm trying to free your mind adventurer. But I can only show you the door. You're the one that has to walk through it. You take the wrong portal, the story ends. You wake up in your bed and believe whatever you want to believe. You take the right portal, you stay in Emailia, and we see how deep the rabbit hole goes. the choice is yours"</p>
<label for="sc8"><h2 class="pd-tb">Take the red portal</h2></label>
<label for="sc1"><h2 class="pd-tb">Take the blue portal</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-4 END -->
<!-- sc-5 -->
<div class="sc sc5" >
<div class="bg-sc bg-5" align="center">
<div class="obiwon">
<img src="http://i5.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-obiwon_15.gif" alt="Obiwon Kanoobe" width="60" style="width:60px; display: block" />
</div>
<div class="hero-e-r">
<div class="hero-w-r"></div>
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-5a">
<p class="pd-b white">A crazy old man stands before you, he announces "Stop adventurer. Who would cross the Bridge of Death must answer me these questions three, ere the other side he see.</p>
<label for="sc5b"><h2 class="pd-tb">"Ask me the questions, bridgekeeper. I'm not afraid."</h2></label>
<label for="sc5f"><h2 class="pd-tb">Ignore the crazy old man and set across the bridge</h2></label>
</div>
<div id="ct-5b">
<p class="pd-b white">"What is your Quest?"</p>
<label for="sc5c"><h2 class="pd-tb">"To defeat the Warlock of Outlook Mountain"</h2></label>
<label for="sc5f"><h2 class="pd-tb">"World peace"</h2></label>
</div>
<div id="ct-5c">
<p class="pd-b white">"What is your favourite colour?"</p>
<label for="sc5f"><h2 class="pd-tb">"Blue"</h2></label>
<label for="sc5d"><h2 class="pd-tb">"Yellow"</h2></label>
</div>
<div id="ct-5d">
<p class="pd-b white">"What… is the air-speed velocity of an unladen swallow?"</p>
<label for="sc5e"><h2 class="pd-tb">"What do you mean? African or European?"</h2></label>
<label for="sc5f"><h2 class="pd-tb">"11 miles per hour"</h2></label>
</div>
<div id="ct-5e">
<p class="pd-b white">"Huh? I... I don't know that." </p>
<label for="sc6"><h2 class="pd-tb">With the old man gone, you're free to cross</h2></label>
</div>
<div id="ct-5f">
<p class="pd-b white">You are swept up by a mysterious force and unceremoniously catapulted over the edge of the bridge. you plummet into the darkness below.</p>
<label for="sc1"><h2 class="pd-tb">after what seems like days you see a light at the end of the chasm...</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-5 END -->
<!-- sc-6 -->
<div class="sc sc6" >
<div class="bg-sc bg-6" align="center">
<div class="boulder">
<img src="http://i8.cmail20.com/ei/j/8A/D18/873/044703/csimport/boulder_38.png" alt="Boulder'n'roll" width="200" style="width:200px;display: block;" />
</div>
<div class="stone-1"></div>
<div class="stone-2"></div>
<div class="stone-3"></div>
<div class="hero-e-b">
<div class="hero-w-b"></div>
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-6a">
<p class="pd-b white">You arrive at the entrance of Outlook dungeon. Your path is blocked by a massive boulder that not even you could move. You notice 3 glyphs on the floor...maybe these could help...</p>
<label for="sc6b"><h2 class="pd-tb">press the left glyph</h2></label>
<label for="sc6c"><h2 class="pd-tb">press the centre glyph</h2></label>
<label for="sc6d"><h2 class="pd-tb">press the right glyph</h2></label>
</div>
<div id="ct-6b">
<p class="pd-b white">The glyph glows bright yellow. Two more glyphs remain (if only there was some logic to this...)</p>
<label for="sc6e"><h2 class="pd-tb">press the centre glyph</h2></label>
<label for="sc6"><h2 class="pd-tb">press the right glyph</h2></label>
</div>
<div id="ct-6c">
<p class="pd-b white">The glyph glows bright yellow. Two more glyphs remain (if only there was some logic to this...)</p>
<label for="sc6"><h2 class="pd-tb">press the left glyph</h2></label>
<label for="sc6f"><h2 class="pd-tb">press the right glyph</h2></label>
</div>
<div id="ct-6d">
<p class="pd-b white">The glyph glows bright yellow. Two more glyphs remain (these icons look somewhat familiar...)</p>
<label for="sc6g"><h2 class="pd-tb">press the left glyph</h2></label>
<label for="sc6"><h2 class="pd-tb">press the centre glyph</h2></label>
</div>
<div id="ct-6e">
<p class="pd-b white">Two down one to go, the final glyph is left to press...</p>
<label for="sc6h"><h2 class="pd-tb">press the right glyph</h2></label>
</div>
<div id="ct-6f">
<p class="pd-b white">Two down one to go, the final glyph is left to press...</p>
<label for="sc6h"><h2 class="pd-tb">press the left glyph</h2></label>
</div>
<div id="ct-6g">
<p class="pd-b white">Two down one to go, the final glyph is left to press...</p>
<label for="sc6i"><h2 class="pd-tb">press the centre glyph</h2></label>
</div>
<div id="ct-6h">
<p class="pd-b white">The last glyph turns yellow and You hear the ancient mechanism clunk, then crack. The boulder rolls towards you and you are flattened like a pancake.</p>
<label for="sc1"><h2 class="pd-tb">Your paper thin body get's picked up by a gust of wind and you drift off into the distance.</h2></label>
</div>
<div id="ct-6i">
<p class="pd-b white">The last glyph turns yellow and You hear the ancient mechanism clunk, then pop. The boulder rolls to the side and off the cliff face. A gloomy tunnel stands before you.</p>
<label for="sc4"><h2 class="pd-tb">Enter the dungeon</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-6 END -->
<!-- sc-7 -->
<div class="sc sc7" >
<div class="bg-sc bg-7" align="center">
<div class="sword1 sword2">
<img src="http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/sword_19.png" alt="Sword" width="25" style="width:25px; display: block" />
</div>
<div class="toady-tongue">
<img src="http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/toad-tongue_39.png" alt="Toady tongue" width="100" style="width:100px; display: block" />
</div>
<div class="toady">
<img src="http://i10.cmail20.com/ei/j/8A/D18/873/044703/csimport/char-toady_40.gif" alt="Toady" width="250" style="width:250px; display: block" />
</div>
<div class="hero-e-l">
<div class="hero-w-l"></div>
</div>
<div class="tree">
<img src="http://i1.cmail20.com/ei/j/8A/D18/873/044703/csimport/fallen-tree_41.png" alt="Fallen tree" width="220" style="width:220px; display: block" />
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-7a">
<p class="pd-b white">The terrain becomes less hospitable and you find yourself deep within the 'Owa Swamp'. Your path is blocked by a fallen tree and a large creature seems not to have noticed your presence</p>
<label for="sc7b"><h2 class="pd-tb">Move towards the tree stump and try to move it</h2></label>
<label for="sc7c"><h2 class="pd-tb">Move towards the creature to get a better look at it</h2></label>
</div>
<div id="ct-7b">
<p class="pd-b white">You get to the tree stump but despite your best efforts, you cannot move it. The Swamp creature has noticed you and is now opening its mouth and eyeing you hungrily.</p>
<label for="sc7d"><h2 class="pd-tb">Attack!</h2></label>
<label for="sc7f"><h2 class="pd-tb">Anticipate the beast's next move</h2></label>
</div>
<div id="ct-7c">
<p class="pd-b white">You get closer to the beast and realise it seems to be some sort of swamp toad. The creature is still not aware of your presence.</p>
<label for="sc7g"><h2 class="pd-tb">Make a break for it before it notices you</h2></label>
<label for="sc7e"><h2 class="pd-tb">Use the element of surprise... Attack!</h2></label>
</div>
<div id="ct-7d">
<p class="pd-b white">You charge the Beast, but its too late. Quicker than anticipated it shoots out its long tongue and pulls you towards its open mouth.</p>
<label for="sc1"><h2 class="pd-tb">You speed directly to it's jaws, darkness follows...</h2></label>
</div>
<div id="ct-7e">
<p class="pd-b white">You successfully Get the drop on the creature but your attack bounces off its tough exoskeleton. The toad turns around, looking at you hungrily.</p>
<label for="sc7f"><h2 class="pd-tb">Anticipate the beast's next move</h2></label>
<label for="sc7d"><h2 class="pd-tb">Attack again!</h2></label>
</div>
<div id="ct-7f">
<p class="pd-b white">You easily dodge the monsters outstretched tongue which sails past you and gets caught on the fallen log. By sheer luck, the creature removes the tree from your path.</p>
<label for="sc6"><h2 class="pd-tb">Get clear before the Swamp Toad does</h2></label>
</div>
<div id="ct-7g">
<p class="pd-b white">You make a break for it but the Toad notices you go and before you can get out of range you are grabbed and pulled backwards.</p>
<label for="sc1"><h2 class="pd-tb">You speed directly to its jaws, darkness follows...</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-7 END -->
<!-- sc-8 -->
<div class="sc sc8" >
<div class="bg-sc bg-8" align="center">
<div id="shield">
<img src="http://i7.cmail20.com/ei/j/8A/D18/873/044703/csimport/shield_17.gif" alt="Super Duper Spam Shield" width="30" style="width:30px;display: block;" />
</div>
<div class="hero-e-l">
<div class="hero-w-l"></div>
</div>
<div class="warlock">
<img src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/warlock-of-outlook_42.gif" alt="Warlock of Outlook Mountain" width="150" style="width:150px;display: block;" />
</div>
<div class="blast-1 blast-end">
<img class="blast" src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/blast_43.png" alt="Blast" width="50" style="width:50px;display: block;" />
</div>
<div class="blast-2 blast-4 blast-end final-blast">
<img class="blast" src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/blast_43.png" alt="Blast" width="50" style="width:50px;display: block;" />
</div>
<div class="blast-3 blast-5 blast-6 blast-end">
<img class="blast" src="http://i3.cmail20.com/ei/j/8A/D18/873/044703/csimport/blast_43.png" alt="Blast" width="50" style="width:50px;display: block;" />
</div>
<div class="sword sword2">
<img src="http://i9.cmail20.com/ei/j/8A/D18/873/044703/csimport/sword_19.png" alt="Sword" width="25" style="width:25px;display: block;" />
</div>
</div>
<div>
<img class="w-100" src="http://i2.cmail20.com/ei/j/8A/D18/873/044703/csimport/img-green-floor_12.jpg" alt="Ground" width="600" style="width:600px; display: block" />
</div>
<div class="ui">
<div class="panel" align="center">
<div class="cont" align="center">
<div id="ct-8a">
<p class="pd-b white">You appear in the Warlocks inner sanctum. "Greetings mortal, I have to admit I didn't expect you to get this far. Shame it ends here..."</p>
<label for="sc8b"><h2 class="pd-tb">"Not a chance"</h2></label>
</div>
<div id="ct-8b">
<p class="pd-b white">"You can't win mortal, I am more powerful than you can possibly imagine". The warlock mutters under his breath. Mystical energy blasts towards you.</p>
<label for="sc8c"><h2 class="pd-tb">Jump</h2></label>
<label for="sc8e"><h2 class="pd-tb">Stay still</h2></label>
<label for="sc8e"><h2 class="pd-tb">Duck</h2></label>
</div>
<div id="ct-8c">
<p class="pd-b white">The Warlock lines up a second attack...</p>
<label for="sc8e"><h2 class="pd-tb">Jump</h2></label>
<label for="sc8d"><h2 class="pd-tb">Stay still</h2></label>
<label for="sc8e"><h2 class="pd-tb">Duck</h2></label>
</div>
<div id="ct-8d">
<p class="pd-b white">The Warlock lines up a third attack...</p>
<label for="sc8f"><h2 class="pd-tb">Jump</h2></label>
<label for="sc8e"><h2 class="pd-tb">Stay still</h2></label>
<label for="sc8e"><h2 class="pd-tb">Duck</h2></label>
</div>
<div id="ct-8e">
<p class="pd-b white">You are hit with the full force of the energy bolt. You are instantaneously disintegrated.</p>
<label for="sc1"><h2 class="pd-tb">The remaining ash slowly drifts off into the yonder...</h2></label>
</div>
<div id="ct-8f">
<p class="pd-b white">"you surprise me mortal, maybe you are a worthy adversary... however, I severely doubt it" The warlock moves forwards and attacks you. </p>
<label for="sc8g"><h2 class="pd-tb">Block the attack with your Shield of Anti-spam</h2></label>
<label for="sc8h"><h2 class="pd-tb">Meet the warlock head on</h2></label>
</div>
<div id="ct-8g">
<p class="pd-b white">You block the attack with your shield but the force of the impact shatters the shield and sends you flying backwards. The warlock is swiftly upon you.</p>
<label for="sc8i"><h2 class="pd-tb">Draw your sword and attack</h2></label>
<label for="sc8j"><h2 class="pd-tb">Dodge the attack</h2></label>
</div>
<div id="ct-8h">
<p class="pd-b white">You come together with a loud clash. You swiftly duck under his following attack and riposte with your own strike.</p>
<label for="sc8k"><h2 class="pd-tb">Swing high</h2></label>
<label for="sc8l"><h2 class="pd-tb">Swing low</h2></label>
</div>
<div id="ct-8i">
<p class="pd-b white">You raise your sword to block the attack but the force is too much. "Foolish mortal, you think you can defy me..."</p>
<label for="sc1"><h2 class="pd-tb">The last thing you see is the Warlocks maniacal face as his attack sends you into darkness...</h2></label>
</div>
<div id="ct-8j">
<p class="pd-b white">You sidestep the attack, which narrowly misses. An opening appears for you to strike back.</p>
<label for="sc8k"><h2 class="pd-tb">Swing high</h2></label>
<label for="sc8l"><h2 class="pd-tb">Swing low</h2></label>
</div>
<div id="ct-8k">
<p class="pd-b white">The warlock laughs and anticipates the attack easily catching your blade in his hand. He summons more magic and blasts you into dust.</p>
<label for="sc1"><h2 class="pd-tb">The remaining ash slowly drifts off into the yonder...</h2></label>
</div>
<div id="ct-8l">
<p class="pd-b white">The warlock misjudges your attack and your strike rings true, your blade hits the Warlock and sends him back to the darkness once again. The oppressive atmosphere lifts from the area and a stillness descends.</p>
<label for="sc1b"><h2 class="pd-tb">Head back to Tableton to spread the good news.</h2></label>
</div>
</div>
</div>
</div>
</div>
<!-- sc-8 END -->
</div>
</div>
<!--<![endif]-->
</div>
</td>
<td style="font-size:0px;"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" bgcolor="#000000" style="table-layout: fixed;">
<tr>
<td bgcolor="#000000" style="font-size:0px;"> </td>
<td class="pd-all fluid" align="center" width="600" bgcolor="#000000" style="padding:20px;">
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="background-color:#000000;">
<tr>
<td align="center" style=" font-family: Arial,Serif; font-size: 13px; font-weight: normal; line-height: 20px; color:#ffffff; padding: 0 0 20px 0;">
<strong>What is this 8-bit adventure?</strong> <br />
We love email. Designing email, building email and pushing the limits of what email can do for our clients. That's why we've built this adventure to explore we can bring interactivity straight to the inbox – read more over at <a href="https://www.emailonacid.com/blog/article/email-development/super-mail-quest-an-interview-with-designer-and-developer-aaron-simmonds" target="_blank" style="color:#009fe3; outline: 0; text-decoration: underline;; text">Email on Acid</a>.
</td>
</tr>
<tr>
<td align="center" style=" font-family: Arial,Serif; font-size: 13px; font-weight: normal; line-height: 20px; color:#ffffff; padding: 0 30px 20px 30px;">
Interested in bringing interactivity to your emails? <a href="mailto:hello@chs.agency" target="_blank" style="color:#009fe3; outline: 0; text-decoration: underline;">Get in touch</a>.
</td>
</tr>
<tr>
<td align="center" style=" font-family: Arial,Serif; font-size: 13px; font-weight: normal; line-height: 20px; color:#ffffff; padding: 0 0 20px 0;"">
Designed, created and developed by <a href="https://twitter.com/otherside_uk" target="_blank" style="color:#009fe3; outline: 0; text-decoration: underline;">Aaron Simmonds</a> at <a href="http://www.chscreative.com" target="_blank" style=" color:#009fe3; outline: 0;"><img src="http://i4.cmail20.com/ei/j/8A/D18/873/044703/csimport/logo-chs_44.png" alt="CHS" width="50" style="width:50px; display: inline-block; margin: 0 0 -4px 0;" /></a>
</td>
</tr>
<tr>
<td align="center" style=" font-family: Arial,Serif; font-size: 13px; font-weight: normal; line-height: 20px; color:#ffffff; padding: 0 30px 20px 30px;">
Release the pigeons, send word to to all on <a href="/login?redirect_after_login=%2Fhome%3Fstatus%3DI%2527m%2Btaking%2Bup%2Bthe%2B%2540superMailQuest%2Bcause.%2BSign%2Bup%2Bat%2Bhttp%253A%252F%252Fbit.ly%252F2wyNGM6%2Band%2Bjoin%2Bme%2Bin%2Bdefeating%2Bthe%2BWarlock%2Bof%2Boutlook%2BMountain." target="_blank" style="color:#009fe3; outline: 0; text-decoration: underline;">Twitter</a>... SuperMailQuest is here.
</td>
</tr>
<tr>
<td align="center" style=" font-family: Arial,Serif; font-size: 13px; font-weight: normal; line-height: 20px; color:#ffffff;">
We hope you enjoyed playing SuperMailQuest as much as we enjoyed making it, but if you don't want to adventure again, <a href="http://chs.cmail20.com/t/j-u-oktile-ykvtithty-h/" style=" color:#009fe3; outline: 0; text-decoration: underline;">Unsubscribe here</a>
</td>
</tr>
</table>
</td>
<td bgcolor="#000000" style="font-size:0px;"> </td>
</tr>
</table>
<img src="https://chs.cmail20.com/t/j-o-oktile-ykvtithty/o.gif" style="visibility: hidden !important; display: block !important; height:1px !important; width:1px !important; border: 0 !important; margin: 0 !important; padding: 0 !important" width="1" height="1" border="0" alt="" /></body>
</html>
Want to see what this email looks like in 50+ email clients? Try Litmus Free
Looking for the following words in your email:
We just opened a brand new tab in your browser, in there you’ll find your scoped email ready to be edited.