Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Android snippets, bug 742055

  • Loading branch information...
commit 48edf8a329bb77ea3fbeec5fca80e971f7488040 1 parent ae36d1c
Craig Cook authored September 07, 2012
86  android/README.md
Source Rendered
... ...
@@ -0,0 +1,86 @@
  1
+# about:home Snippets for Android SMS campaign
  2
+
  3
+This campaign promotes Firefox for Android. There are three snippets, 
  4
+each with a different animated sequence.
  5
+
  6
+* "Push" - The android appears as a small icon. When activated, he 
  7
+vanishes in a puff of smoke and reappears much larger next to the logo. 
  8
+The android turns and squeezes the logo down to size and appears to push it 
  9
+into a mobile phone that grows from behind the logo. The android then turns 
  10
+back to face the viewer, and with another puff of smoke goes back to his 
  11
+former size and position as an icon.
  12
+
  13
+* "Play" - The android peeks from behind the search field. On activation, 
  14
+he leaps up and off the top of the screen, pulling down a mobile phone. 
  15
+The logo then shrinks down to appear on the phone's screen as the 
  16
+android passes behind the phone, leaning out to wave at the viewer.
  17
+
  18
+* "Shop" - The android peeks from behind the search field. On activation, 
  19
+he pops up and turns to lift a shopping bag (bearing the Google 
  20
+Playlogo) from behind the search field. The Firefox logo lowers into the bag 
  21
+and a mobile phone (showing the logo) rises from the bag to take its place. 
  22
+The shopping bag lowers out of view as the android passes behind the phone 
  23
+to wave at the viewer.
  24
+
  25
+The CSS animation was done by Particle (particularplace.com), and their original, 
  26
+unminified code is also included with each snippet for reference.
  27
+
  28
+For the en-US locale, the link leads to a web page where a user can enter 
  29
+his or her mobile phone number and a link to the Google Play store will be 
  30
+sent to their phone automatically. Because this SMS service is currently 
  31
+only available in the US, snippets for other locales link directly to the 
  32
+Google Play store.
  33
+
  34
+# Localized Strings
  35
+
  36
+## For English locales:
  37
+
  38
+### Push:
  39
+Fast. Smart. Safe. <a href="https://www.mozilla.org/firefox/sms/">Put Firefox on your Android phone</a>.  
  40
+
  41
+### Play:
  42
+Fast. Smart. Safe. <a href="https://www.mozilla.org/firefox/sms/">It's never been easier to put Firefox on your Android phone.
  43
+
  44
+### Shop:
  45
+Fast. Smart. Safe. <a href="https://www.mozilla.org/firefox/sms/">Get the mobile browser that's got your back.
  46
+
  47
+
  48
+## All other locales use the same text for all three snippets
  49
+
  50
+### es-ES
  51
+Rápido. Inteligente. Seguro. <a href="https://market.android.com/details?id=org.mozilla.firefox">Obtén el navegador para dispositivos móviles que te protege. Obtén Firefox para Android.</a>
  52
+
  53
+### de
  54
+Schnell. Intelligent. Sicher. <a href="https://market.android.com/details?id=org.mozilla.firefox">Holen Sie sich den mobilen Browser, der Sie beschützt.</a>
  55
+
  56
+### it
  57
+Veloce. Intelligente. Sicuro. <a href="https://market.android.com/details?id=org.mozilla.firefox">Installa il browser mobile che si preoccupa solo di te.</a>
  58
+
  59
+### ru
  60
+Быстрый. Умный. Безопасный. <a href="https://market.android.com/details?id=org.mozilla.firefox">Установите мобильный браузер, надёжно прикрывающий вашу спину.</a>
  61
+
  62
+### cs
  63
+Rychlý. Chytrý. Bezpečný. <a href="https://market.android.com/details?id=org.mozilla.firefox">Získejte mobilní prohlížeč co vám kryje záda.</a>
  64
+
  65
+### ko
  66
+빠르고. 똑똑하고. 안전한.  <a href="https://market.android.com/details?id=org.mozilla.firefox">새로운 모바일 브라우저가 돌아왔습니다.</a>
  67
+
  68
+### fr
  69
+Rapide. Sûr. Malin. <a href="https://market.android.com/details?id=org.mozilla.firefox">Adoptez le navigateur mobile qui assure vos arrières.</a>
  70
+
  71
+### nl
  72
+Snel. Slim. Veilig. <a href="https://market.android.com/details?id=org.mozilla.firefox">Kies de mobiele browser die u beschermt.</a>
  73
+
  74
+### pt-BR
  75
+Rápido. Inteligente. Seguro. <a href="https://market.android.com/details?id=org.mozilla.firefox">Use o navegador que se preocupa com você.</a>
  76
+
  77
+### pl
  78
+Szybka. Innowacyjna. Bezpieczna. <a href="https://market.android.com/details?id=org.mozilla.firefox">Pobierz przeglądarkę, która jest po Twojej stronie.</a>
  79
+
  80
+### nb-NO
  81
+Rask. Smart. Sikker. <a href="https://market.android.com/details?id=org.mozilla.firefox">Last ned den mobile nettleseren som passer på deg.</a>
  82
+
  83
+## License
  84
+
  85
+Any copyright is dedicated to the Public Domain.
  86
+http://creativecommons.org/publicdomain/zero/1.0/
BIN  android/phone-icon.png
1,024  android/play/snippet-play-fromParticle.html
... ...
@@ -0,0 +1,1024 @@
  1
+<div class="snippet tiny-android">
  2
+  
  3
+  <style type="text/css">
  4
+body{
  5
+  overflow: hidden;
  6
+}
  7
+  #brandLogo {
  8
+    z-index: 10;
  9
+  }
  10
+  #brandLogo.shrink {
  11
+    -moz-animation: shrink-logo 1000ms ease-in-out 500ms forwards 1;
  12
+  } 
  13
+/*                            */
  14
+/*        PHONE               */
  15
+/*                            */
  16
+/*                            */
  17
+    #container {
  18
+      position: absolute;
  19
+      top: 0;
  20
+      left: 0;
  21
+      width: 208px;
  22
+      height: 420px;
  23
+      -moz-transform-style: preserve-3d;
  24
+      -moz-transform: translate3d(0,-3000px,0) scale(.47) rotateX(0deg);
  25
+      -moz-perspective: 800px;
  26
+      z-index: 5;
  27
+      outline: solid thin transparent;
  28
+    }
  29
+
  30
+      #container.phone-phone-home {
  31
+        -moz-animation: phone-phone-home 800ms linear 0ms forwards 1;
  32
+      }
  33
+
  34
+    #main-phone-container {
  35
+      position: absolute;
  36
+      top:0;
  37
+      left: 0;
  38
+      width: 208px;
  39
+      height: 420px;
  40
+      -moz-transform-style: preserve-3d;
  41
+      -moz-perspective: 200px;
  42
+      -moz-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  43
+      outline: solid thin transparent;
  44
+    }
  45
+      #main-phone-container.shift-phone {
  46
+        /*-moz-transform:translate3d(0,0,0) rotateX(30deg) rotateY(0deg) rotateZ(0deg);*/
  47
+        -moz-animation: shift-phone-perspective 800ms ease 0ms forward 1;
  48
+      }
  49
+
  50
+    .outer-phone-container {
  51
+      position: absolute;
  52
+      width: 214px; 
  53
+      height: 426px;
  54
+      background: rgba(65,65,65,1);
  55
+      border-radius: 40px 40px / 40px 40px;
  56
+      -moz-transform-style: preserve-3d;
  57
+      -moz-transform: translate3d(0,0,0);
  58
+    }
  59
+      
  60
+      .outer-phone-container .phone-top {
  61
+        position: absolute;
  62
+        top: -6px;
  63
+        left: 13px;
  64
+        width: 188px;
  65
+        height: 20px;
  66
+        background: rgba(65, 65, 65, 1);
  67
+        border-radius: 210px 210px 0px 0px / 50px 50px 0px 0px;
  68
+        -moz-transform-style: preserve-3d;
  69
+        -moz-transform: translate3d(0,0,0);
  70
+      }
  71
+      
  72
+      .outer-phone-container .phone-bottom {
  73
+        position: absolute;
  74
+        bottom: -6px;
  75
+        left: 13px;
  76
+        width: 188px;
  77
+        height: 20px;
  78
+        background: rgba(65, 65, 65, 1);
  79
+        border-radius: 0px 0px 210px 210px / 0px 0px 50px 50px;
  80
+        -moz-transform-style: preserve-3d;
  81
+        -moz-transform: translate3d(0,0,0);
  82
+      }
  83
+    
  84
+    .inner-phone-container {
  85
+      position: absolute;
  86
+      left: 3px;
  87
+      top: 3px; 
  88
+      width: 208px;
  89
+      height: 420px;
  90
+      background: rgba(25, 25, 25, 1);
  91
+      border-radius: 40px 40px / 40px 40px;
  92
+      box-shadow: inset 0px 4px 4px rgba(255, 255, 255, .6);
  93
+      -moz-transform-style: preserve-3d;
  94
+      -moz-transform: translate3d(0,0,0);
  95
+    }
  96
+      
  97
+      .inner-phone-container .phone-top {
  98
+        position: absolute;
  99
+        top: -6px;
  100
+        left: 13px;
  101
+        width: 184px;
  102
+        height: 20px;
  103
+        background: rgba(25, 25, 25, 1);        
  104
+        border-radius: 210px 210px 0px 0px / 50px 50px 0px 0px;
  105
+        box-shadow: inset 0px 4px 2px rgba(255, 255, 255, .);
  106
+        -moz-transform-style: preserve-3d;
  107
+        -moz-transform: translate3d(0,0,0);
  108
+      }
  109
+      
  110
+      .inner-phone-container .phone-bottom {
  111
+        position: absolute;
  112
+        bottom: -6px;
  113
+        left: 13px;
  114
+        width: 184px;
  115
+        height: 20px;
  116
+        background: rgba(25, 25, 25, 1);
  117
+        border-radius: 0px 0px 210px 210px / 0px 0px 50px 50px;
  118
+        -moz-transform-style: preserve-3d;
  119
+        -moz-transform: translate3d(0,0,0);
  120
+      }
  121
+    
  122
+      .inner-phone-container .speaker-slot {
  123
+        position: absolute;
  124
+        top: 18px;
  125
+        left: 80px;
  126
+        width: 54px;
  127
+        height: 8px;
  128
+        background: rgba(0,0,0,1);
  129
+        border-radius: 10px;
  130
+        border-top: 1px solid rgba(40,40,40,1);
  131
+        border-left: 1px solid rgba(40,40,40,1);
  132
+        border-bottom: 1px solid rgba(0,0,0,1);
  133
+        border-right: 1px solid rgba(0,0,0,1);
  134
+        box-shadow: inset 0 -2px 1px rgba(255,255,255,.5);
  135
+        -moz-transform-style: preserve-3d;
  136
+        -moz-transform: translate3d(0,0,0);
  137
+      }
  138
+    
  139
+      .inner-phone-container .camera-lens {
  140
+        position: absolute;
  141
+        top: 19px;
  142
+        right: 32px;
  143
+        width: 10px;
  144
+        height: 10px;
  145
+        background: rgba(30, 30, 40, 1);
  146
+        border-radius: 10px;
  147
+        box-shadow: inset 0px -2px 3px rgba(255, 255, 255, .1);
  148
+        -moz-transform-style: preserve-3d;
  149
+        -moz-transform: translate3d(0,0,0);
  150
+      }
  151
+      
  152
+      .inner-phone-container .status-bar {
  153
+        position: absolute;
  154
+        top: 54px;
  155
+        left: 11px;
  156
+        height: 12px;
  157
+        width: 188px;
  158
+        background: rgba(5,5,5,1);
  159
+        -moz-transform-style: preserve-3d;
  160
+        -moz-transform: translate3d(0,0,0);
  161
+      }
  162
+      
  163
+      .inner-phone-container .inner-screen {
  164
+        position: absolute;
  165
+        top: 66px;
  166
+        left: 11px;
  167
+        width: 188px;
  168
+        height: 298px;
  169
+        background-color: #96C3DC;
  170
+        box-shadow: inset 0px 0px 3px rgba(50,50,50,1);
  171
+        -moz-transform-style: preserve-3d;
  172
+        -moz-transform: translate3d(0,0,0);
  173
+      }
  174
+/*                            */
  175
+/*        PHONE               */
  176
+/*                            */
  177
+/*                            */
  178
+
  179
+.snippet.tiny-android .icon {
  180
+  top: 0px;
  181
+  width: 40px;
  182
+  height: 40px;
  183
+  /* background-color: black; */
  184
+}
  185
+
  186
+#searchBarWrapper {
  187
+  -moz-transform-origin: 0% 50%;
  188
+  -moz-transform: translate3d(0,0,0);
  189
+  z-index: 800;
  190
+}
  191
+
  192
+#searchContainer {
  193
+  z-index: 800;
  194
+}
  195
+
  196
+#searchForm {
  197
+  z-index: 800;
  198
+}
  199
+
  200
+#searchLogoContainer {
  201
+  z-index: 800;
  202
+}
  203
+
  204
+#searchText {
  205
+  z-index: 800;
  206
+}
  207
+
  208
+#searchSubmit {
  209
+  z-index: 800;
  210
+}
  211
+
  212
+  #newContentWrapper #searchBarWrapper.shake { 
  213
+    -moz-animation: shake 540ms ease 0ms forwards; 
  214
+  }
  215
+
  216
+
  217
+
  218
+#android-container {
  219
+  position: absolute;
  220
+  bottom: -78px;
  221
+  xleft: 40px;
  222
+  right: -128px;
  223
+  width: 264px;
  224
+  height: 0px;
  225
+  -moz-transform-style: preserve-3d;
  226
+  -moz-perspective: 800px;
  227
+  -moz-transform-origin: 0% 0%;
  228
+  -moz-transform: translate3d(-44px,-24px,0) scale(.26);
  229
+  pointer-events: auto;
  230
+}
  231
+  
  232
+  #android-container.step-2 {
  233
+    -moz-transform: translate3d(0px,-207px,0) scale(.3);
  234
+    -moz-animation: container-to-phone 1s linear 0ms forwards 1;
  235
+  }
  236
+
  237
+  #android-container.phone-home {
  238
+    -moz-transform: translate3d(0,0,0)
  239
+  }
  240
+
  241
+  .curtain {
  242
+    position: absolute;
  243
+    bottom: 34px;
  244
+    xleft: 280px;
  245
+    right: 0;
  246
+    height: 3000px;
  247
+    width: 3000px;
  248
+    pointer-events: none;
  249
+    overflow: hidden;
  250
+    -moz-transform-style: preserve-3d;
  251
+    -moz-transform: translate3d(0,0,0);
  252
+    background-color: transparent;
  253
+  }
  254
+
  255
+  #android-large-wrapper {
  256
+    position: absolute;
  257
+    bottom: 20px;
  258
+    left: 20px;
  259
+    width: 264px;
  260
+    height: 336px;
  261
+    -moz-transform-style: preserve-3d;
  262
+    -moz-transform-origin: 0% 0%;
  263
+    -moz-transform: translate3d(0,0,0);
  264
+    pointer-events: auto;
  265
+  }
  266
+
  267
+    #newContentWrapper #android-large-wrapper.step-1 { 
  268
+      -moz-animation: move-droid 30s ease-in-out 600ms forwards infinite; 
  269
+    }
  270
+
  271
+    #newContentWrapper #android-large-wrapper.begin-animation { 
  272
+      -moz-animation: begin-animation 1s ease 0ms forwards 1; 
  273
+    }
  274
+
  275
+    #newContentWrapper #android-large-wrapper.step-2 { 
  276
+      -moz-transform: translate3d(50px,-207px,0);/*
  277
+      -moz-transition-property: -moz-transform ;
  278
+      -moz-transition-duration: 1s;
  279
+      -moz-transition-timing-function: ease;*/
  280
+      -moz-animation: to-phone 1s linear 0ms forwards 1;
  281
+    }
  282
+
  283
+    #newContentWrapper #android-large-wrapper.droid-phone-home { 
  284
+      -moz-transform: translate3d(-380px,-3000px,0);
  285
+      -moz-animation: droid-phone-home 800ms linear 0ms forwards 1;
  286
+    }
  287
+
  288
+    #newContentWrapper #android-large-wrapper.droid-move-behind-phone {
  289
+      -moz-transform: translate3d(-130px,-200px,0);
  290
+      -moz-animation: droid-move-behind-phone 800ms linear 0ms forwards 1;
  291
+    }
  292
+
  293
+    .android {
  294
+      position: absolute;
  295
+      top: 0px;
  296
+      width: 264px;
  297
+      height: 336px;
  298
+      -moz-transform-style: preserve-3d;
  299
+      z-index: 1;
  300
+      -moz-transform: translate3d(0,0,0);
  301
+    }
  302
+
  303
+      .android .rotating-container {
  304
+        position: absolute;
  305
+        width: 264px;
  306
+        height: 336px;
  307
+        -moz-transform-style: preserve-3d;
  308
+        -moz-transform: translate3d(0,0,0);
  309
+        z-index: 1;
  310
+      }
  311
+
  312
+      .android .body {
  313
+        position: absolute;
  314
+        top: 110px;
  315
+        left: 48px;
  316
+        width: 168px;
  317
+        height: 152px;
  318
+        border-radius: 0px 0px 20px 20px;
  319
+        background-color: #96c03c;
  320
+        z-index: 1;
  321
+        -moz-transform-style: preserve-3d;
  322
+        -moz-transform: translate3d(0,0,0);
  323
+        outline: solid thin transparent;
  324
+      }
  325
+        
  326
+      .android #head {
  327
+        position: absolute;
  328
+        top: 30px;
  329
+        left: 48px;
  330
+        width: 168px;
  331
+        height: 68px;
  332
+        border-top-left-radius: 50% 100%;
  333
+        border-top-right-radius: 50% 100%;
  334
+        -moz-transform-origin: 50% 50%;
  335
+        background-color: #96c03c;
  336
+        z-index: 1;
  337
+        -moz-transform-style: preserve-3d;
  338
+        -moz-transform: translate3d(0,0,0);
  339
+        -moz-persective: 800;
  340
+        outline: solid thin transparent;
  341
+      }
  342
+        
  343
+        .android #head.bobble-head {
  344
+          -moz-animation: bobble-head 15s ease 3s forwards infinite;
  345
+        }
  346
+
  347
+        .android #eyes-overflow-wrapper {
  348
+          position: absolute;
  349
+          top: 25px;
  350
+          left: 8px;
  351
+          width: 152px;
  352
+          height: 20px;
  353
+          overflow: hidden;
  354
+          z-index: 1;
  355
+          outline: solid thin transparent;
  356
+          -moz-transform-style: preserve-3d;
  357
+          -moz-transform: translate3d(0,0,0);
  358
+        }
  359
+
  360
+          .android #eyes-overflow-wrapper.look-at-logo {
  361
+            -moz-animation: look-at-logo 600ms ease 0ms forwards 1;
  362
+          }
  363
+         
  364
+        .android .eyes {
  365
+          position: absolute;
  366
+          width: 152px;
  367
+          height: 20px;
  368
+          -moz-transform-style: preserve-3d;
  369
+          -moz-transform: translate3d(0,0,0);
  370
+          -moz-animation: eye-animation 3500ms ease 1s both infinite;
  371
+          z-index: 1;
  372
+        }
  373
+        
  374
+          .android .eye {
  375
+            position: absolute;
  376
+            width: 20px;
  377
+            height: 20px;
  378
+            border-radius: 10px 10px 10px 10px;
  379
+            background-color: white;
  380
+            z-index: 1;
  381
+            -moz-transform-style: preserve-3d;
  382
+            -moz-transform: translate3d(0,0,0);
  383
+          }
  384
+            .android .eye.left { left: 30px; }
  385
+            .android .eye.right { right: 30px; }
  386
+            
  387
+          .android .antenna {
  388
+            position: absolute;
  389
+            top: 8px; 
  390
+            width: 6px;
  391
+            height: 32px;
  392
+            border-radius: 15px 15px 0px 0px;
  393
+            -moz-transform-origin: 50% 100%;
  394
+            -moz-transform-style: preserve-3d;
  395
+            -moz-transform: translate3d(0,0,0);
  396
+            background-color: #96c03c;
  397
+            z-index: 1;
  398
+            outline: solid thin transparent;
  399
+          }
  400
+            
  401
+            .android .antenna.left {
  402
+              left: 104px; 
  403
+              -moz-transform: translate3d(0,0,0) rotateZ(-32deg);
  404
+              -webkit-transform: translate3d(0,0,0) rotateZ(-32deg);
  405
+
  406
+            }
  407
+              .android.large .antenna.left { 
  408
+                /*-moz-animation: antenna-animation-left 1s ease-in-out 0ms alternate infinite;  */
  409
+              }
  410
+              
  411
+              .android.large .antenna.left.spin { 
  412
+                /*-moz-animation: spin-head-antennae-l 800ms linear 2000ms 4;*/
  413
+              }
  414
+
  415
+            .android .antenna.right {
  416
+              right: 104px; 
  417
+              -moz-transform: translate3d(0,0,0) rotateZ(32deg);
  418
+              -webkit-transform: translate3d(0,0,0) rotateZ(32deg);
  419
+            }
  420
+              .android.large .antenna.right { 
  421
+                /*-moz-animation: antenna-animation-right 1s ease-in-out 0s alternate infinite;  */
  422
+              }
  423
+
  424
+              .android.large .antenna.right.spin { 
  425
+                /*-moz-animation: spin-head-antennae-r 800ms linear 2000ms 4;*/
  426
+              }
  427
+             
  428
+      .android .arm {
  429
+        position: absolute;
  430
+        top: 110px;
  431
+        width: 36px;
  432
+        height: 114px;
  433
+        border-radius: 18px 18px 18px 18px;
  434
+        background-color: #96c03c;
  435
+        -moz-transform-origin: 50% 16%;
  436
+        -webkit-transform-origin: 50% 16%;
  437
+        -moz-transform: translate3d(0,0,0) rotateY(0deg);
  438
+        z-index: 1;
  439
+        -moz-transform-style: preserve-3d;
  440
+        outline: solid thin transparent;
  441
+      }
  442
+        .android .arm.left { 
  443
+          left: 0px; 
  444
+        }
  445
+          .android .arm.left.flight {
  446
+            -moz-transform: rotate(-200deg);
  447
+          }
  448
+
  449
+          .android .arm.left.wave {
  450
+            -moz-animation: wave-left 3s ease-in-out 400ms forwards 1;
  451
+          }
  452
+
  453
+        .android .arm.right { 
  454
+          left: 228px; 
  455
+        }
  456
+          .android .arm.right.flight {
  457
+            -moz-transform: rotate(200deg);
  458
+          }
  459
+
  460
+          .android .arm.right.flight.land {
  461
+            -moz-animation: landing-arms 600ms ease-in-out 400ms forwards 1;
  462
+          }
  463
+
  464
+      .android .leg {
  465
+        position: absolute;
  466
+        top: 250px;
  467
+        width: 36px;
  468
+        height: 72px;
  469
+        border-radius: 0px 0px 18px 18px;
  470
+        background-color: #96c03c;
  471
+        -moz-transform: translate3d(0,0,0) rotateY(0deg);
  472
+        z-index: 1;
  473
+        -moz-transform-style: preserve-3d;
  474
+        outline: solid thin transparent;
  475
+      }
  476
+        .android .leg.left { 
  477
+          left: 86px; 
  478
+        }
  479
+          .android .leg.left.step {
  480
+            -moz-animation: stepping 790ms ease-in-out 100ms forwards 1;
  481
+          } 
  482
+        .android .leg.right { 
  483
+          right: 84px; 
  484
+        }
  485
+          .android .leg.right.step {
  486
+            -moz-animation: stepping 790ms ease-in-out 0ms forwards 1;
  487
+          }
  488
+    
  489
+.smoke-container {
  490
+  position: absolute;
  491
+  top: -80px; 
  492
+  left: 316px;
  493
+  width: 40px; 
  494
+  height: 40px;
  495
+	color: rgba(200, 200, 200, 1);
  496
+	font-weight: 600;
  497
+	font-size: 80px;
  498
+  text-indent: -9999px;
  499
+  display: none;
  500
+}
  501
+
  502
+.smoke-container-two {
  503
+  position: absolute;
  504
+  top: -80px; 
  505
+  left: 335px;
  506
+  width: 40px; 
  507
+  height: 40px;
  508
+  color: rgba(200, 200, 200, 1);
  509
+  font-weight: 600;
  510
+  font-size: 80px;
  511
+  text-indent: -9999px;
  512
+  display: none;
  513
+}
  514
+  .icon.blow-up .smoke-container{ 
  515
+    display: block; 
  516
+  }
  517
+
  518
+.smoke-container-two .smoke, .smoke-container .smoke {
  519
+  position: absolute;
  520
+	-moz-animation-name: smoke;
  521
+}
  522
+  
  523
+  .smoke-container-two .smoke, .smoke-container .smoke.one {
  524
+    left: 5px;
  525
+    top: -50px;
  526
+  	-moz-animation-duration: 3000ms;
  527
+  }
  528
+  .smoke-container-two .smoke, .smoke-container .smoke.two {
  529
+    left: 9px;
  530
+    top: -45px;
  531
+  	-moz-animation-duration: 3300ms;
  532
+  }
  533
+  .smoke-container-two .smoke, .smoke-container .smoke.three {
  534
+    left: 13px;
  535
+    top: -48px;
  536
+  	-moz-animation-duration: 3700ms;
  537
+  }
  538
+  .smoke-container-two .smoke, .smoke-container .smoke.four {
  539
+    left: 2px;
  540
+    top: -40px;
  541
+  	-moz-animation-duration: 3700ms;
  542
+  }
  543
+  .smoke-container-two .smoke, .smoke-container .smoke.five {
  544
+    left: 18px;
  545
+    top: -40px;
  546
+  	-moz-animation-duration: 3700ms;
  547
+  }
  548
+  .smoke-container-two .smoke, .smoke-container .smoke.six {
  549
+    left: 8px;
  550
+    top: -34px;
  551
+  	-moz-animation-duration: 3000ms;
  552
+  }    
  553
+
  554
+@-moz-keyframes stepping {
  555
+  0%{ -moz-transform: translate3d(0,0,0); }
  556
+  /*14%{ -moz-transform: translate3d(0,-20px,0); }*/
  557
+  25%{ -moz-transform: translate3d(0,-40px,0); }
  558
+  /*42%{ -moz-transform: translate3d(0,-20px,0); }*/
  559
+  50%{ -moz-transform: translate3d(0,0,0); }
  560
+  /*80%{ -moz-transform: translate3d(0,-20px,0); }*/
  561
+  75%{ -moz-transform: translate3d(0,-40px,0); }
  562
+  100%{ -moz-transform: translate3d(0,0,0); }
  563
+}
  564
+
  565
+@-moz-keyframes shift-phone-perspective {
  566
+  0% { -moz-transform: translate3d(0,0,0) rotateX(0deg); }
  567
+  100% { -moz-transform: translate3d(0,0,0) rotateX(100deg); }
  568
+}
  569
+
  570
+@-moz-keyframes slide-eyes {
  571
+  0%{ -moz-transform: translate3d(0,0,0); }
  572
+  19%{ -moz-transform: translate3d(-280px,0,0); }
  573
+  54%{ -moz-transform: translate3d(-280px,0,0); }
  574
+  54.001%{ -moz-transform: translate3d(100px,0,0); }
  575
+  73%{ -moz-transform: translate3d(0px,0,0); }
  576
+  100%{ -moz-transform: translate3d(0px,0,0); }
  577
+}
  578
+
  579
+@-moz-keyframes shrink-logo {
  580
+  0%{ -moz-transform: translate3d(0,0,0) scale(1); }
  581
+  100%{ -moz-transform: translate3d(0,8px,0) scale(.45); }
  582
+}
  583
+
  584
+@-moz-keyframes landing-arms {
  585
+  0% { -moz-transform: translate3d(0,0,0) rotate(-180deg); }
  586
+  100% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  587
+}
  588
+
  589
+@-moz-keyframes wave-left {
  590
+  0% { -moz-transform: rotate(0deg); }
  591
+  15% { -moz-transform: rotate(156deg); }
  592
+  25% { -moz-transform: rotate(136deg); }
  593
+  35% { -moz-transform: rotate(156deg); }
  594
+  45% { -moz-transform: rotate(40deg); }
  595
+  55% { -moz-transform: rotate(30deg); }
  596
+  65% { -moz-transform: rotate(136deg); }
  597
+  75% { -moz-transform: rotate(156deg); }
  598
+  85% { -moz-transform: rotate(136deg); }
  599
+  100% { -moz-transform: rotate(156deg); }
  600
+}
  601
+
  602
+@-moz-keyframes phone-phone-home {
  603
+  0% { -moz-transform: translate3d(0,-2200px,0) rotateX(0deg) scale(.46); }
  604
+  80% { -moz-transform: translate3d(130px,-367px,0) rotateX(0deg) scale(.46); }
  605
+  90% { -moz-transform: translate3d(130px,-367px,0) rotateX(0deg) scale(.46); }
  606
+  100% { -moz-transform: translate3d(130px,-367px,0) rotateX(0deg) scale(.46); }
  607
+}
  608
+
  609
+@-moz-keyframes droid-phone-home {
  610
+  0% {  -moz-transform: translate3d(-380px,-4000px,0) rotate(0deg); }
  611
+  85% {  -moz-transform: translate3d(-130px,-280px,0) rotate(0deg); }
  612
+  100% {  -moz-transform: translate3d(-130px,-280px,0) rotate(0deg); }
  613
+}
  614
+
  615
+@-moz-keyframes droid-move-behind-phone {
  616
+  0% {  -moz-transform: translate3d(-130px,-280px,0) rotate(0deg); }
  617
+  80% {  -moz-transform: translate3d(-530px,-280px,0) rotate(0deg); }
  618
+  100% {  -moz-transform: translate3d(-640px,-250px,0) rotate(-15deg); }
  619
+}
  620
+
  621
+@-moz-keyframes container-to-phone {
  622
+  0% { -moz-transform: translate3d(-44px,-97px,0) rotate(0deg) scale(.26); }
  623
+  20% { -moz-transform: translate3d(-44px,-208px,0) rotate(0deg) scale(.26); }
  624
+  50% { -moz-transform: translate3d(-180px,-520px,0) rotate(-30deg) scale(.26); }
  625
+  70% { -moz-transform: translate3d(-280px,-728px,0) rotate(-45deg) scale(.26); }
  626
+  100% { -moz-transform: translate3d(-380px,-3000px,0) rotate(-45deg) scale(.26); }
  627
+}
  628
+
  629
+@-moz-keyframes to-phone {
  630
+  0% { -moz-transform: translate3d(50px,0,0); }
  631
+  20% { -moz-transform: translate3d(50px,0,0); }
  632
+  100% { -moz-transform: translate3d(-900px,0,0); }
  633
+}
  634
+
  635
+@-moz-keyframes spin-head-eyes {
  636
+  0%{ -moz-transform: translate3d(0,0,0); }
  637
+  /*19%{ -moz-transform: translate3d(-280px,0,0); }
  638
+  54%{ -moz-transform: translate3d(-280px,0,0); }
  639
+  54.001%{ -moz-transform: translate3d(280px,0,0); }
  640
+  59.8%{ -moz-transform: translate3d(0px,0,0); }*/
  641
+  100%{ -moz-transform: translate3d(0px,0,0); }
  642
+}
  643
+
  644
+@-moz-keyframes spin-head-antennae-l {
  645
+  0%{ -moz-transform: translate3d(0,0,0); }
  646
+  /*19%{ -moz-transform: translate3d(48px,0,0); }
  647
+  54%{ -moz-transform: translate3d(48px,0,0); }
  648
+  54.001%{ -moz-transform: translate3d(-48px,0,); }
  649
+  59.8%{ -moz-transform: translate3d(0,0,0); }*/
  650
+  100%{ -moz-transform: translate3d(0,0,0); }
  651
+}
  652
+
  653
+@-moz-keyframes spin-head-antennae-r {
  654
+  0%{ -moz-transform: translate3d(0,0,0); }
  655
+  /*19%{ -moz-transform: translate3d(-48px,0,0) rotateZ(0deg); }
  656
+  54%{ -moz-transform: translate3d(-48px,0,0) rotateZ(0deg); }
  657
+  54.001%{ -moz-transform: translate3d(48px,0,0) rotateZ(0deg); }
  658
+  59.8%{ -moz-transform: translate3d(0,0,0) rotateZ(0deg); }*/
  659
+  100%{ -moz-transform: translate3d(0,0,0); }
  660
+}
  661
+
  662
+@-moz-keyframes bobble-head {
  663
+  0% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  664
+  15% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  665
+  20% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  666
+  21% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  667
+  /*90% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  668
+  91% { -moz-transform: translate3d(0,-4px,0) rotate(10deg) }
  669
+  92% { -moz-transform: translate3d(0,4px,0) rotate(-10deg); }
  670
+  93% { -moz-transform: translate3d(0,-4px,0) rotate(10deg); }
  671
+  94% { -moz-transform: translate3d(0,4px,0) rotate(-10deg); }
  672
+  95% { -moz-transform: translate3d(0,0,0) rotate(0deg); }*/
  673
+  100% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  674
+}
  675
+
  676
+@-moz-keyframes begin-animation {
  677
+  0% { -moz-transform: translate3d(0px,0px,0);  }
  678
+  40% { -moz-transform: translate3d(50px,-187px,0);  }
  679
+  100% { -moz-transform: translate3d(50px,-187px,0);  }
  680
+}
  681
+
  682
+@-moz-keyframes move-droid {
  683
+  0% { -moz-transform: translate3d(0,0,0); }
  684
+  15% { -moz-transform: translate3d(-108px,-10px,0); }
  685
+  30% { -moz-transform: translate3d(0,0,0); }
  686
+  35% { -moz-transform: translate3d(40px,5px,0); }
  687
+  55% { -moz-transform: translate3d(8px,3px,0); }
  688
+  57% { -moz-transform: translate3d(-45px,-10px,0); }
  689
+  59% { -moz-transform: translate3d(0px,-12px,0); }
  690
+  64% { -moz-transform: translate3d(55px,-12px,0); }
  691
+  74% { -moz-transform: translate3d(20px,0px,0); }
  692
+  100% { -moz-transform: translate3d(0,0,0); }
  693
+}
  694
+
  695
+@moz-keyframes look-right {
  696
+  0% { -moz-transform: translate3d(0,0,0); }
  697
+  25% { -moz-transform: translate3d(8px,10px,0); }
  698
+  50% { -moz-transform: translate3d(0,0,0); }
  699
+  75% { -moz-transform: translate3d(-8px,-10px,0); }
  700
+  100% { -moz-transform: translate3d(0,0,0); }
  701
+}
  702
+
  703
+@-moz-keyframes look-at-logo {
  704
+  0% { -moz-transform: translate3d(0,0,0); }
  705
+  100% { -moz-transform: translate3d(-12px,-2px,0); }
  706
+}
  707
+
  708
+@-moz-keyframes eye-animation {
  709
+  0% { -moz-transform: scaleY(1); }
  710
+  5% { -moz-transform: scaleY(0); }
  711
+  10% { -moz-transform: scaleY(1); }
  712
+  100% { -moz-transform: scaleY(1); }
  713
+}
  714
+
  715
+@-moz-keyframes arm-animation-left {
  716
+	0% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  717
+	4% { -moz-transform: translate3d(0,0,0) rotate(156deg); }
  718
+	6.5% { -moz-transform: translate3d(0,0,0) rotate(136deg); }
  719
+	8% { -moz-transform: translate3d(0,0,0) rotate(156deg); }
  720
+  9% { -moz-transform: translate3d(0,0,0) rotate(136deg); }
  721
+	11% { -moz-transform: translate3d(0,0,0) rotate(40deg); }
  722
+	12% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  723
+	100% { -moz-transform: translate3d(0,0,0) rotate(0deg); }
  724
+}
  725
+
  726
+@-moz-keyframes left-leg-animation {
  727
+  0%{ -moz-transform: translate3d(0px,0px,0px) scaleY(1); }
  728
+  100%{ -moz-transform: translate3d(0px,0px,0px) scaleY(.5); }
  729
+}
  730
+
  731
+@-moz-keyframes blow-up-android {
  732
+  0%{ opacity: 1; }
  733
+  100%{ opacity: 0; }
  734
+}
  735
+
  736
+/* ------------------------------------------------------------- */
  737
+@-moz-keyframes smoke {
  738
+	0% { text-shadow: 9999px 0 0 rgba(153, 153, 153, 1); }
  739
+	20% { text-shadow: 9999px -40px 20px rgba(153, 153, 153, 0); }
  740
+	100% { text-shadow: 9999px 0 0 rgba(0, 0, 0, 0); }
  741
+}
  742
+/* ------------------------------------------------------------- */
  743
+@-moz-keyframes drop-hero {
  744
+  0%{ -moz-transform: translate3d(0,0,0) scale(.41); opacity: 0; }
  745
+  7.5%{ -moz-transform: translate3d(0,300px,0) scale(.41); opacity: 1; }
  746
+  25%{ -moz-transform: translate3d(0,1000px,0) scale(.41); opacity: 1; }
  747
+  56%{ -moz-transform: translate3d(0,1000px,0) scale(.41); opacity: 1; }
  748
+  /* 90%{ -moz-transform: translate3d(-128px,1000px,0) scale(.41); opacity: 1; } */
  749
+  100%{ -moz-transform: translate3d(-128px,1000px,0) scale(.41); opacity: 1; }
  750
+}
  751
+/* ------------------------------------------------------------- */
  752
+@-moz-keyframes shake {
  753
+  0%{ -moz-transform: translate3d(0,0,0) rotateZ(0deg); }
  754
+  20%{ -moz-transform: translate3d(0,12px,0) rotateZ(1deg); }
  755
+  54%{ -moz-transform: translate3d(0,0px,0) rotateZ(0deg); }
  756
+  70%{ -moz-transform: translate3d(0,3px,0) rotateZ(.2deg); }
  757
+  80%{ -moz-transform: translate3d(0,0px,0) rotateZ(0deg); }
  758
+  100%{ -moz-transform: translate3d(0,0px,0) rotateZ(0deg); }
  759
+}
  760
+/* ---------------------------------------------------- */
  761
+@-moz-keyframes antenna-animation-left {
  762
+	0% { -moz-transform: translate3d(0,0,0) rotate(-32deg); }
  763
+	10% { -moz-transform: translate3d(0,0,0) rotate(-22deg); }
  764
+	20% { -moz-transform: translate3d(0,0,0) rotate(-32deg); }
  765
+	100% { -moz-transform: translate3d(0,0,0) rotate(-32deg); }
  766
+}
  767
+
  768
+@-webkit-keyframes antenna-animation-left {
  769
+	0% { -webkit-transform: translate3d(0,0,0) rotate(-32deg); }
  770
+	10% { -webkit-transform: translate3d(0,0,0) rotate(-22deg); }
  771
+	20% { -webkit-transform: translate3d(0,0,0) rotate(-32deg); }
  772
+	100% { -webkit-transform: translate3d(0,0,0) rotate(-32deg); }
  773
+}
  774
+/* ---------------------------------------------------- */
  775
+@-moz-keyframes antenna-animation-right {
  776
+	0% { -moz-transform: translate3d(0,0,0) rotate(32deg); }
  777
+	10% { -moz-transform: translate3d(0,0,0) rotate(22deg); }
  778
+	20% { -moz-transform: translate3d(0,0,0) rotate(32deg); }
  779
+	100% { -moz-transform: translate3d(0,0,0) rotate(32deg); }
  780
+}
  781
+
  782
+@-webkit-keyframes antenna-animation-right {
  783
+	0% { -webkit-transform: translate3d(0,0,0) rotate(32deg); }
  784
+	10% { -webkit-transform: translate3d(0,0,0) rotate(22deg); }
  785
+	20% { -webkit-transform: translate3d(0,0,0) rotate(32deg); }
  786
+	100% { -webkit-transform: translate3d(0,0,0) rotate(32deg); }
  787
+}
  788
+/* ---------------------------------------------------- */
  789
+
  790
+    
  791
+  </style>
  792
+    
  793
+    <div class="smoke-container">
  794
+      <div class="smoke one">.</div>
  795
+      <div class="smoke two">.</div>
  796
+      <div class="smoke three">.</div>
  797
+      <div class="smoke four">.</div>
  798
+      <div class="smoke five">.</div>
  799
+      <div class="smoke six">.</div>
  800
+    </div>
  801
+
  802
+     <div class="smoke-container-two">
  803
+      <div class="smoke one">.</div>
  804
+      <div class="smoke two">.</div>
  805
+      <div class="smoke three">.</div>
  806
+      <div class="smoke four">.</div>
  807
+      <div class="smoke five">.</div>
  808
+      <div class="smoke six">.</div>
  809
+    </div>
  810
+
  811
+  <!-- </div> -->
  812
+  <div class="curtain" style="display: none;">
  813
+    <div id="android-container">
  814
+      <div id="android-large-wrapper">
  815
+        <div class="android large">
  816
+          <div class="body"></div>
  817
+          <div id="head">
  818
+            <div id="eyes-overflow-wrapper">
  819
+              <div class="eyes">
  820
+                <div class="eye left"></div>
  821
+                <div class="eye right"></div>
  822
+              </div>
  823
+            </div>
  824
+          </div>
  825
+          <div class="rotating-container">
  826
+            <div class="antenna left"></div>
  827
+            <div class="antenna right"></div>
  828
+          </div>
  829
+          <div class="arm left"></div>
  830
+          <div class="arm right"></div>
  831
+          <div class="leg left"></div>
  832
+          <div class="leg right"></div>
  833
+        </div>
  834
+      </div>
  835
+    </div>
  836
+  </div>
  837
+
  838
+  <div id="container">    
  839
+      <div id="main-phone-container">      
  840
+        <div class="outer-phone-container">
  841
+          <div class="phone-top"></div>
  842
+          <div class="phone-bottom"></div>
  843
+        </div>
  844
+        <div class="inner-phone-container">  
  845
+          <div class="phone-top"></div>
  846
+          <div class="speaker-slot"></div>
  847
+          <div class="camera-lens"></div>
  848
+          <div class="status-bar"></div>
  849
+          <div class="inner-screen"></div>
  850
+          <div class="phone-bottom"></div>
  851
+        </div>
  852
+      </div>      
  853
+    </div>
  854
+
  855
+
  856
+  <p style="z-index:800;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  857
+  <script type="text/javascript">
  858
+   //<![CDATA[
  859
+    function wrapInitialPageContent(){
  860
+      var topSection = document.querySelector("#topSection");
  861
+      topSection.style.position = "relative"; // need to add positioning to this so we can get proper offsetTop bellow
  862
+      //topSection.style.top = "100px";
  863
+      // search bar stuff
  864
+      var searchContainer = document.querySelector("#searchContainer");
  865
+      var form = searchContainer.querySelector("form");
  866
+      //var formComputedStyle = window.getComputedStyle(form);
  867
+      var formWidth = form.offsetWidth;
  868
+      var formHeight = form.offsetHeight;
  869
+      var formOffsetTop = form.offsetTop;
  870
+      var searchBarWrapper = document.createElement("div");
  871
+      searchBarWrapper.setAttribute("style","position: absolute; bottom: 0px; left: 0px; width: "+formWidth+"px; height: "+formHeight+"px; z-index: 800;");
  872
+      searchBarWrapper.id = "searchBarWrapper";
  873
+      searchBarWrapper.appendChild(searchContainer);
  874
+      
  875
+      // brand logo
  876
+      var brandLogo = document.querySelector("#brandLogo");
  877
+      var brandLogoOffsetTop = brandLogo.offsetTop;
  878
+      brandLogo.style.position = "absolute";
  879
+      brandLogo.style.top = brandLogoOffsetTop+"px";
  880
+      brandLogo.style.left = Math.floor((formWidth - brandLogo.width) / 2)+"px";
  881
+      brandLogo.style.marginTop = "0";
  882
+      brandLogo.style.marginBottom = "0";
  883
+      brandLogo.style.zindex = "500";
  884
+      brandLogo.className += " brand-logo-override";
  885
+      
  886
+      // new div to move content into
  887
+      var newContentWrapper = document.createElement("div");
  888
+      newContentWrapper.id = "newContentWrapper";
  889
+      newContentWrapper.setAttribute("style","position: relative; width: "+formWidth+"px; height: "+(formOffsetTop+formHeight)+"px; margin-left: auto; margin-right: auto;");
  890
+      
  891
+      brandLogo.parentNode.insertBefore(newContentWrapper, brandLogo);
  892
+      
  893
+      // move content into place
  894
+      newContentWrapper.appendChild(brandLogo);
  895
+      newContentWrapper.appendChild(searchBarWrapper);
  896
+      
  897
+      // re-focus input
  898
+      document.querySelector("#searchText").focus();
  899
+    }
  900
+    
  901
+    function injectLargeAndroid () {
  902
+      var largeAndroid = document.querySelector(".curtain");//"#android-container");
  903
+      var searchBarWrapper = document.querySelector("#newContentWrapper");
  904
+      searchBarWrapper.appendChild(largeAndroid);
  905
+      largeAndroid.style.display = "block";
  906
+    }
  907
+    
  908
+    function blowUpTinyAndroid () {
  909
+      var tinyAndroid = document.querySelector(".android.tiny");
  910
+      tinyAndroid.parentNode.className += " blow-up";
  911
+      var newContentWrapper = document.querySelector("#newContentWrapper");
  912
+      newContentWrapper.className += " run-hero-animation";
  913
+    }
  914
+
  915
+    wrapInitialPageContent();
  916
+    this.bottomOfPhoneForDroid = null;
  917
+    // mouseover the tiny android to start everything off
  918
+    window.initialAndroidMouseoverEventHasBeenFired = false;
  919
+    
  920
+    setTimeout(function(){
  921
+      injectLargeAndroid();
  922
+      //setPhonePosition();
  923
+      
  924
+      var android = document.getElementById("android-large-wrapper");
  925
+      var androidHead = document.querySelector("#head");
  926
+      var androidArms = document.querySelectorAll(".arm");
  927
+      var androidLegs = document.querySelectorAll(".leg");
  928
+      var androidContainer = document.getElementById("android-container");
  929
+      var eyeContainer = document.getElementById("eyes-overflow-wrapper");
  930
+      //var rightAnten = document.querySelectorAll(".android.large .antenna.right");
  931
+      //var leftAnten = document.querySelectorAll(".android.large .antenna.left");
  932
+      //var eyes = document.querySelector(".eyes");
  933
+
  934
+      var phone = document.getElementById("container");
  935
+      var phoneContainer = document.getElementById("main-phone-container");
  936
+      
  937
+      var smokeOne = document.querySelector(".smoke-container");
  938
+      var smokeTwo = document.querySelector(".smoke-container-two");
  939
+      var brandLogo = document.getElementById("brandLogo");
  940
+      
  941
+      var brandLogo = document.getElementById("brandLogo");
  942
+      var curtain = document.querySelector(".curtain");
  943
+      var searchBarWrapper = document.getElementById("searchBarWrapper");
  944
+
  945
+      android.className += " step-1";
  946
+
  947
+      android.addEventListener("animationstart", function(e){
  948
+        if (e.animationName == "droid-move-behind-phone") {
  949
+          setTimeout(function(){
  950
+            androidArms[0].className = " arm left wave";
  951
+          }, 150);
  952
+        }
  953
+      }, false);
  954
+
  955
+      android.addEventListener("animationend", function(e){
  956
+
  957
+        if (e.animationName == "begin-animation") {//droid finished moving on top of search bar
  958
+          eyeContainer.className += "look-at-logo";//move eyes to look at firefox logo
  959
+          //eyes.className = "eyes";
  960
+        }
  961
+
  962
+        if (e.animationName == "look-at-logo") {//droid has looked at ff logo
  963
+          androidHead.className = ""; //clear the head nods and spins
  964
+          eyeContainer.className = "";
  965
+          searchBarWrapper.className += " shake";
  966
+          //do a transition here to go get phone
  967
+          
  968
+          androidArms[0].className += " flight";
  969
+          androidArms[1].className += " flight";
  970
+
  971
+          //lift off
  972
+          
  973
+          android.className = "step-2";
  974
+          smokeOne.style.display = "block";//show the smoke left leg
  975
+          smokeTwo.style.display = "block";//show the smoke right leg
  976
+          
  977
+          android.className += " to-phone";
  978
+          androidContainer.className += " step-2";
  979
+          //document.querySelector(".to-phone").setAttribute("style", "-moz-transform: translate3d(-390px,-" + droidCeiling + "px,0px) scale(.41);");
  980
+        }
  981
+
  982
+        if (e.animationName == "to-phone") {
  983
+          //lift off has finished
  984
+          //curtain.className = "";
  985
+          //removing "to-phone" animations
  986
+          androidContainer.className = "";
  987
+          searchBarWrapper.className = "";
  988
+          android.className = "";
  989
+          phone.className += " phone-phone-home";
  990
+          android.className += " droid-phone-home";
  991
+          brandLogo.className += " shrink";
  992
+          androidArms[1].className += " land";
  993
+        }
  994
+
  995
+        if (e.animationName == "droid-phone-home") {
  996
+          android.className = "droid-move-behind-phone";
  997
+          androidLegs[0].className += " step";
  998
+          androidLegs[1].className += " step";
  999
+        }
  1000
+
  1001
+      }, false);
  1002
+
  1003
+      brandLogo.addEventListener("animationend", function(e){
  1004
+        if (e.animationName == "shrink-logo") {
  1005
+          phoneContainer.className += "shift-phone";
  1006
+        }
  1007
+      }, false);
  1008
+
  1009
+      android.addEventListener("mouseover", function(e){
  1010
+        if(!initialAndroidMouseoverEventHasBeenFired){
  1011
+          initialAndroidMouseoverEventHasBeenFired = true;
  1012
+          android.style.webkitAnimation = "";
  1013
+          android.className = "begin-animation";
  1014
+          console.log(e.target);
  1015
+          console.log(e.currentTarget);
  1016
+          //blowUpTinyAndroid();
  1017
+        }
  1018
+      }, false);